Question

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

当我在Chrome中查看时，我连接SVGPan来平移和放大我生成的图像，但是（可以理解）所有图元都使用缩放进行缩放，因为SVGPan只使用缩放变换。所以放大并没有帮助弄清楚在很小的特征区域发生了什么。

我找到了vector-effect属性，通过让我指定宽度（以像素为单位）来很好地修复线段。但它无助于我管理文本。理想情况下，无论变换规模有多大，它都是12 pt。

而且我仍然对绘制积分感到茫然。我以为我可以使用圆圈，但半径也会缩放，所以如果放大太远，它看起来就像一堆圆圈而不是点。如果我使用矢量效果属性，圆的笔触宽度将不再缩放，但圆的半径仍然存在。所以我最终得到的是带有细轮廓的大圆圈，而不是一个半圆形像素或一个小圆圈。

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

Answer 1

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

简而言之，您希望（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一起工作的辅助方法，所以你所要做的就是包括我的库（两个函数），为每个标记添加一个noscale类然后写类似的东西：

unscaleEach('#viewport .noscale');

缩放独立元素

1 个答案: