Сохранять размер элементов потомков при масштабировании родительского элемента

У меня есть страница 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>

Есть ли лучшее решение? Может быть, есть способ "reset" результирующий масштабный коэффициент для внутренних элементов <text>? Код должен работать в Firefox и Chrome.

UPD. Существует также возможность размещать текстовые элементы вне масштабируемого элемента и вручную управлять позициями текстовых элементов. Это позволяет избежать визуальных сбоев, возникающих в тексте из-за масштабирования. В настоящее время я использую этот метод.

Ответ 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.

Ответ 2

Если допустимо (а) использовать JavaScript и (б) указать положение каждого элемента unscaling через transform="translate(…,…)" либо на самом элементе, либо в группе обертывания (как вы это сделали), тогда вы можете использовать мой код unscaling:
http://phrogz.net/svg/libraries/SVGPanUnscale.js

Демо: http://jsfiddle.net/uPSc4/

Как вы можете видеть в демо, он отменяет все преобразования, кроме перевода (включая масштаб, поворот и перекос), сохраняя при этом элементы, расположенные там, где они должны быть.

См. также эту демонстрацию, которая позволяет масштабировать и панорамировать графику с помощью SVGPan, сохраняя некоторые незаметные элементы маркировки:
http://phrogz.net/svg/scale-independent-elements.svg

Здесь нужен весь код:

// Copyright 2012 © Gavin Kistner, [email protected]
// 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>

Ответ 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);

JsFiddle - http://jsfiddle.net/uPSc4/10/