Svg 保留子元素'；缩放父元素时的大小

我有一个XHTML页面，其中嵌入了SVG作为

元素。我需要实现伸缩，但有一个要求，即内部

元素不能伸缩。一个显而易见的解决办法是

你好，世界！

还有比这更好的解决办法吗？也许有一种方法可以“重置”内部

元素上的结果比例因子？该代码必须在Firefox和Chrome中工作

UPD。还有一个选项可以将文本元素放置在要缩放的元素之外，并手动控制文本元素的位置。它避免了由于缩放而在文本上出现视觉故障。目前我使用这种方法。

中定义了

transform=“ref（svg）”

。据我所知，除了Opera（Presto）之外，这在任何浏览器中都没有实现

你好，世界！
你好，世界！

在上面的示例中，文本应该出现在灰色轮廓所在的位置（在左上角）。对于具有

transform=“ref（svg）”

的元素，不应将旋转或缩放应用于该元素，就转换而言，它就像是根svg元素的直接子元素一样。

如果（a）使用JavaScript和（b）通过

transform=“translate（…，…）指定每个取消缩放元素的位置是可以接受的

在元素本身上或在包装组中（如您所做的），然后您可以使用我的非缩放代码：

演示： 正如您在演示中看到的，它会撤消除平移（包括缩放、旋转和倾斜）之外的所有变换，同时保持元素的位置不变

另请参阅此演示，它允许您使用缩放和平移图形，同时保持某些标记元素不缩放：

以下是您需要的所有代码：

//版权所有2012©Gavin Kistner@phrogz.net
//许可证：http://phrogz.net/JS/_ReuseLicense.txt
//删除应用于元素上方的所有变换。
//对图元应用平移以使其保持在局部位置
函数非标度（el）{
var svg=el.ownerSVGElement；
var xf=el.scaleIndependentXForm；
如果（！xf）{
//在堆栈中保留一个变换矩阵以对抗变换
//确保在现有转换（转换）之后应用此转换
xf=el.scaleIndependentXForm=svg.createSVGTransform（）；
el.transform.baseVal.appendItem（xf）；
}
var m=svg.getTransfermToElement（el.parentNode）；
m、 e=m.f=0；//忽略（保留）到目前为止所做的任何翻译
xf.集合矩阵（m）；
}

以下是演示代码，以防JSFIDLE关闭：

A.
B
C
var root=document.querySelector（'g'），
text=document.querySelectorAll（'text'），
xf=root.transform.baseVal.getItem（0）；
//不断缩放、旋转和滑动外部图形
//但随后“取消缩放”每个文本元素。
setInterval（函数（）{
var m=xf.矩阵.比例（0.99）.平移（10,0）.旋转（1）；
xf.集合矩阵（m）；
[]forEach.call（文本，未缩放）；
},100);​
​

试试这个

HTML

<svg>  
  <g transform="scale(0.5)">   
    <g transform="translate(100 50)">      
      <text x="0" y="0">Hello, World!</text>
    </g>
  </g>
</svg>

---

JsFiddle-

感谢您提出的有用建议。但是

ref（…）

确实在Firefox中不起作用。上面的最后一行代码与（var i=0；i）的

相同
var svg = document.getElementsByTagName('svg')[0]; 
var text = document.querySelectorAll('text')[0];  
var matrix = svg.createSVGTransformFromMatrix(text.getCTM().inverse().translate(100,50));
text.transform.baseVal.initialize(matrix);