在缩放父元素时保留后代元素的大小

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

SVG Tiny 1.2中定义了transform="ref(svg)"。据我所知，除了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元素的直接子元素。

Answer 2

如果（a）使用JavaScript和（b）通过transform="translate(…,…)"指定每个取消缩放元素在元素本身或包装组中的位置（如您所做的）是可以接受的，那么您可以使用我的取消缩放代码：
http://phrogz.net/svg/libraries/SVGPanUnscale.js

演示：http://jsfiddle.net/uPSc4/

正如您在演示中看到的，它取消了除平移（包括缩放、旋转和扭曲）之外的所有转换，同时将元素定位在它们应该位于的位置

另请参阅此演示，它允许您使用SVGPan缩放和平移图形，同时保持某些标记元素不缩放：
http://phrogz.net/svg/scale-independent-elements.svg

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

// Copyright 2012 © Gavin Kistner, !@phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt
// Removes 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
    // Be sure to apply this transform after existing transforms (translate)
    xf = el.scaleIndependentXForm = svg.createSVGTransform();
    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);
}

以下是演示代码，以防JSFiddle宕机：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:x="http://www.w3.org/1999/xlink"
     font-size="36">
  <g transform="matrix(1 0 0 1 0 0)">
    <g transform="translate(100 50)"><text x="0" y="1em">A!</text></g>
    <g transform="translate(200 150)"><text x="0" y="1em">B!</text></g>
    <g transform="translate(150 75)"><text x="0" y="1em">C!</text></g>
  </g>
  <script x:href="http://phrogz.net/svg/libraries/SVGPanUnscale.js"></script>
  <script>
    var root = document.querySelector('g'),
        text = document.querySelectorAll('text'),
        xf   = root.transform.baseVal.getItem(0);
    // Keep scaling, spinning, and sliding the outer graphic
    // but "unscale" each text element afterwards.    
    setInterval(function(){
      var m = xf.matrix.scale(0.99).translate(10,0).rotate(1);
      xf.setMatrix(m);
      [].forEach.call(text,unscale);
    },100);​
  </script>
</svg>​

Answer 3

试试这个

HTML

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

找到逆矩阵，只添加所需的变换。

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);

Js出价-http://jsfiddle.net/uPSc4/10/