Wie skaliert man das Element, indem man die feste Position in SVG

Question

hält, möchte ich das untere Element in fester Position skalieren.

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/> 

Wenn Sie mit der Skalierung beginnen, bewegt sich diese von einem Ort zum anderen. Ich möchte das Objekt nicht bewegen, ich möchte nur die Größe des Objekts vergrößern.

Ich habe folgenden Link verwiesen.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

wie feste Skalierung zu tun?

Ich möchte das Element animieren, d. H. Die Größe in fester Position vergrößern. Ich habe folgendes implementiert. aber es bewegt das Element vom Ursprung weg. Bitte beziehen Sie sich auf den folgenden Code.

bezog sich den folgenden Link für die Skalierung im zentrierten Punkt.

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

aber es beginnt noch vom Ursprung und vergrößert das Element.

Danke,

Siva

Answer 1

Skalierung auf den Ursprung (0, 0) zentriert ist, so dass, wenn Ihre Form ist auf nicht zentriert (0, 0) wird es zu bewegen scheint. Um dies zu beheben zuerst Ihre Form übersetzen, damit es auf den Ursprung zentriert ist, dann ist es skalieren, dann übersetzen sie zurück:

transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"

Beachten Sie, dass die Transformationen in umgekehrter Reihenfolge sind.

Sie können Dinge vereinfachen, indem Sie eine Form erstellen, die auf den Ursprung zentriert ist, um damit zu beginnen und ihn dann zu skalieren und zu transformieren.

<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>

Sie könnten auch die Transformation in Matrix umwandeln, was effizienter wäre:

<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>

[EDIT] jQuery verwenden animieren, dies funktionieren sollte (Skalierung von 0 bis 1 über 4 Sekunden):

 var box = element.getBBox(); 
     var cx = box.x + box.width/2; 
     var cy = box.y + box.height/2; 

     $(element).animate(
      { scale: 1 }, 
      { duration: 4000, 
       step: function(now, fx) { 
        scaleVal = now; 
        $(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")"); 
       } 
      } 
     ); 

Answer 2

OK, jetzt, nachdem ich Ihre Frage erneut gelesen habe, scheint es, dass Sieverwenden möchtenund begegne auch dem mysteriösen "Umzug", der für die meisten Anfänger verwirrend ist, die SVG lernen (mich eingeschlossen).

Scaling vom origin(0,0) gemessen wird, damit, wenn das Objekt an der Position ist (50,-100), wenn scale(2) Anwendung wird der Objektort zu (50*2, -100*2) verdoppelt =>(100, -200). Daher müssen Sie dies durch translate(-50,100) korrigieren.

Mit matrix() wäre der nächste Bereich zu erkunden, wie es ziemlich intuitiv ist. Das obige Beispiel würde matrix(2 0 0 2 -50 100) benötigen, um es zu skalieren und zurück zum Original zu bewegen.Auch mit matrix() Code können Sie flip() und mirror() einfach mit dem 2. und 3. Feld durchführen. Auch hier müssen Sie die Länge und/oder Breite des Objekts für diese beiden Transformationen übersetzen.