缩放独立元素

Question

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

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

我找到了矢量效果属性,通过让我指定宽度(以像素为单位)来很好地修复线段.但它无助于我管理文本.理想情况下,无论变换规模有多大,它都是12 pt.

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

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

Answer 1

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

• 如何使用Javascript在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一起工​​作的辅助方法,所以你所要做的就是包括我的库(两个函数),noscale为每个标记添加一个类,然后写一些类似的东西:

unscaleEach('#viewport .noscale');