svg - 缩放独立元素

Question

我有一个正在处理的 (2D) 计算几何库，我希望能够吐出图片以帮助调试。我想要的图元是点、线段和文本。但是我事先并不知道我会对查看什么比例感兴趣(也许只有一小部分多边形不能正常工作)，所以我也需要能够缩放和平移图像。

我勾搭上了 SVGPan当我在 Chrome 中查看它们时平移和缩放我生成的图像，但是(可以理解的)所有图元都随着缩放缩放，因为 SVGPan 仅通过使用缩放变换工作。因此，放大并不能帮助弄清楚非常小的特征区域中发生了什么。

我找到了 vector-effect属性，它通过让我以像素为单位指定宽度来很好地修复线段。但这并不能帮助我管理文本。理想情况下，无论变换比例有多大，它都是 12 磅。

而且我也对画点一头雾水。我以为我可以使用圆圈，但半径也会缩放，所以如果你放大得太远，它看起来就像一堆圆圈而不是点。如果我使用矢量效果属性，圆的笔划宽度将不再缩放，但圆的半径仍然如此。所以我最终得到了轮廓很细的大圆圈，而不是半径为一两个像素的小圆圈。

有没有办法只缩放元素的位置？我真的总是希望线条、点和文本无论比例如何都显示相同的大小，并且只有它们的位置有比例。我的 SVG 文件都是机器生成的，严格来说是为了帮助我编码，所以如果有人有任何想法，我不介意奇怪的黑客攻击。或者如果有另一种技术而不是 SVG 对这个用例更有意义。

Answer 1

我在这些问题中更深入地回答了这个问题:

• How to draw non-scalable circle in SVG with Javascript
• Preserve descendant elements' size while scaling the parent element

简而言之，您想 (a) 使用 transform="translate(…,…) 来定位未缩放的元素，并且 (b) 每次您在某些包装器(如 SVGPan)上调整转换时does) 将您不想缩放的每个元素传递给此函数:

// Copyright 2012 © Gavin Kistner, !@phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt

// Counteracts all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
  var svg = el.ownerSVGElement;
  var xf = el.scaleIndependentXForm;
  if (!xf){
    // Keep a single transform matrix in the stack for fighting transformations
    xf = el.scaleIndependentXForm = svg.createSVGTransform();
    // Be sure to apply this transform after existing transforms (translate)
    el.transform.baseVal.appendItem(xf);
  }
  var m = svg.getTransformToElement(el.parentNode);
  m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
  xf.setMatrix(m);
}

上面第一个问题的答案还描述了一个旨在直接与 SVGPan 一起工作的辅助方法，因此您所要做的就是包含我的库(两个函数)，为每个标记添加一个 noscale 类然后这样写:

unscaleEach('#viewport .noscale');