Bewahren untergeordneten Elemente' Größe und Skalierung des parent-Elements

Ich habe eine XHTML-Seite mit SVG-eingebettet in die Sie als <svg> element. Ich brauche zu implementieren, skalieren, aber es ist eine Anforderung, die innere <text> Elemente müssen nicht skalieren. Eine offensichtliche Lösung ist

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

Gibt es eine bessere Lösung als das? Vielleicht gibt es eine Art "reset", die daraus resultierende Skalierungsfaktor für innere <text> Elemente? Muss der code funktioniert in Firefox und Chrome.

UPD. Es gibt auch eine option, um text-Elemente, die außerhalb des element skaliert und manuell Steuern-text-Positionen. Es vermeidet visuelle Störungen, die auf den text, weil der Skalierung. Ich verwende derzeit diese Methode.

InformationsquelleAutor Evgeny A. | 2012-01-16

svg

Es ist transform="ref(svg)" definiert ist,SVG Tiny 1.2. Zu den besten meines Wissens ist dies nicht implementiert in jedem Browser außer 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>

In dem obigen Beispiel der text erscheinen soll, wo die graue Umrandung ist (in der oberen linken Ecke). Keine rotation oder Skalierung angewendet werden sollte, um das element, das transform="ref(svg)" für die Zwecke der Transformationen es ist, als ob es war ein direktes Kind des svg-root-element.

Vielen Dank für eine nützliche Anregung. Aber ref(...) funktioniert nicht in Firefox, in der Tat.

InformationsquelleAutor Erik Dahlström

Wenn es zulässig ist, um (a) die JavaScript verwenden und (b) geben Sie die position der einzelnen unscaling element über transform="translate(…,…)" entweder auf das element selbst oder in einer Verpackung-Gruppe (wie Sie getan haben), dann können Sie meine unscaling code:

http://phrogz.net/svg/libraries/SVGPanUnscale.js

Demo: http://jsfiddle.net/uPSc4/

Wie man sehen kann in der demo es macht alle transformation mit Ausnahme der übersetzung (einschließlich Skalierung, Drehung und Neigung), während die Elemente positioniert, wo Sie sein sollen.

Siehe auch dieses demo, die Ihnen ermöglicht, zu Zoomen und schwenken Sie die Grafik mit SVGPan, während bestimmte Kennzeichnung nicht skalierten Elemente:

http://phrogz.net/svg/scale-independent-elements.svg

Hier ist der ganze code, den Sie benötigen:

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

Hier der demo-code, bei JSFiddle ist down:

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

Die Letzte Zeile der obigen code ist der gleiche wie for (var i=0;i<text.length;++i) unscale(text[i],i);

InformationsquelleAutor Phrogz

Versuchen, diese

HTML

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

Finden Sie die inverse matrix und fügen Sie erforderlichen Transformationen nur.

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/

InformationsquelleAutor Gilsha

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.