Svg 尺度无关元素

我有一个（2D）计算几何库，我正在工作，我希望能够吐出图片来帮助调试。我想要的基本体是点、线段和文本。但我还不知道我会对什么比例感兴趣（可能只是多边形的一小部分不正常），所以我还需要能够缩放和平移图像

当我在Chrome中查看生成的图像时，我连接到了平移和缩放，但是（可以理解的）所有原语都在缩放，因为SVGPan仅通过使用缩放变换工作。因此，放大并不能帮助了解非常小的特征区域中发生了什么

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

我也对画点感到困惑。我想我可以使用圆，但是半径也可以缩放，所以如果你放大太远，它看起来就像一堆圆而不是点。如果使用“矢量效果”属性，则圆的笔划宽度将不再缩放，但圆的半径仍会缩放。所以我最终得到的是轮廓很薄的大圆，而不是半径只有一两个像素的小圆

---

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

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

简言之，您希望（a）使用

transform=“translate（…，…）

定位不缩放元素，以及（b）每次在某个包装器上调整变换时（如SVGPan所做的），将不希望缩放的每个元素传递到此函数：

// 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的助手方法，因此您只需包含my library（两个函数），向每个标记添加一个

noscale

类，然后编写如下内容：

unscaleEach('#viewport .noscale');

---

可能重复感谢，这确实是我一直在寻找的。除非我注意到，如果有一个带有缩放变换的包装组，它将缩放非缩放元素，直到你用鼠标滚轮放大/缩小。查看你的代码这是有意义的，因为代码只会通过附加到鼠标滚轮事件来运行。有没有办法o在第一次加载SVG文档时运行unscaleEach脚本？@Jay确定；如果您查看代码，它所做的就是

var r=getRoot（evt.target.ownerDocument）；[].forEach.call（r.queryselectoral（selector），unscale）

所以你可以在任何时候对你想要的任何元素调用

unscale

。我通过添加

[].forEach.call（getRoot（window.root）.querySelectorAll（selector），unscale）；

在

unscaleEach

函数的末尾，它的工作方式与我现在想要的完全一样；再次感谢！