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

Question

我有一个XHTML页面,其中SVG作为<svg>元素嵌入其中.我需要实现缩放,但是要求内部<text>元素不能缩放.一个明显的解决方案是

<svg ...>
  <!-- Root <g> to programmatically `setAttribute("transform", ...)` -->
  <g transform="scale(0.5)">
    <!-- Various inner elements here -->
    <!-- Here is a text element.
         Additional <g> is to apply text position which
         *must* depend on the scaling factor set above -->
    <g transform="translate(100 50)">
      <!-- Apply the opposite scaling factor.
           Must be done for every `<text>` element on each change of the scaling factor... -->
      <text x="0" y="0" transform="scale(2)">Hello, World!</text>
    </g>
  </g>
</svg>

有比这更好的解决方案吗？也许,有一种方法可以"重置"内部<text>元素的结果缩放因子？该代码必须适用于Firefox和Chrome.

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

Answer 1

有transform="ref(svg)"一个在SVG Tiny 1.2中定义.据我所知,除Opera(Presto)之外的任何浏览器都没有实现.

<svg xmlns="http://www.w3.org/2000/svg" font-size="24" text-rendering="geometricPrecision">
  <!-- Root <g> to programmatically `setAttribute("transform", ...)` -->
  <text x="0" y="1em" stroke="gray" fill="none">Hello, World!</text>
  <g transform="scale(0.5) rotate(25)">
    <!-- Various inner elements here -->
    <!-- Here is a text element.
         Additional <g> is to apply text position which
         *must* depend on the scaling factor set above -->
    <g transform="translate(100 50)">
      <!-- Apply the opposite scaling factor.
           Must be done for every `<text>` element on each change of the scaling factor... -->
      <text x="0" y="1em" transform="ref(svg)">Hello, World!</text>
    </g>
  </g>
</svg>

在上面的示例中,文本应出现在灰色轮廓所在的位置(在左上角).对于具有transform="ref(svg)"转换目的的元素,不应该应用旋转或缩放,就好像它是根svg元素的直接子元素一样.