Ich möchte das untere Element in einer festen Position skalieren.
%Vor%Wenn Sie mit der Skalierung beginnen, bewegt sich die Datei von einem Ort zum anderen. Ich möchte das Objekt nicht verschieben, ich möchte nur die Größe des Objekts vergrößern.
Ich habe folgenden Link verwiesen.
Wie man eine feste Skalierung vornimmt?
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. Siehe unten stehenden Code.
%Vor%bezog sich auf den unteren Link zur Skalierung im zentrierten Punkt.
aber es beginnt immer vom Ursprung und vergrößert das Element.
Danke,
Siva
Die Skalierung ist auf den Ursprung (0, 0) zentriert. Wenn Ihre Form also nicht auf (0, 0) zentriert ist, wird sie sich scheinbar bewegen. Um dies zu beheben, übersetzen Sie Ihre Form so, dass sie auf den Ursprung zentriert ist, skalieren Sie sie und übersetzen Sie sie dann zurück:
transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"
Beachten Sie, dass die Transformationen in umgekehrter Reihenfolge ausgeführt werden.
Sie können Dinge vereinfachen, indem Sie eine Form erstellen, die auf den Ursprung zentriert ist, mit dem Sie beginnen und dann skalieren und 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 die Umwandlung auch in eine Matrix umwandeln, die 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] Um jQuery animate zu verwenden, sollte dies funktionieren (Skalierung von 0 auf 1 über 4 Sekunden):
%Vor% OK, nachdem ich Ihre Frage erneut gelesen habe, scheint es, dass Sie transform="scale()" verwenden und auch auf den mysteriösen "Zug" stoßen möchten, was für die meisten Anfänger verwirrend ist, die SVG lernen (mich eingeschlossen).
Die Skalierung wird von origin(0,0) aus gemessen. Wenn sich das Objekt also an der Position (50,-100) befindet, wird die Objektposition bei der Anwendung von scale(2) auf (50*2, -100*2) = & gt; %Code%. Daher müssen Sie dies mit (100, -200) korrigieren.
Die Verwendung von translate(-50,100) wäre der nächste zu erforschende Bereich, da es ziemlich intuitiv ist. Das obige Beispiel würde matrix() benötigen, um es zu skalieren und zurück zum Original zu verschieben. Auch mit matrix(2 0 0 2 -50 100) code können Sie matrix() und flip() einfach mit dem 2. und 3. Feld ausführen. Auch hier müssen Sie die Länge und / oder Breite des Objekts für diese beiden Transformationen übersetzen.
Tags und Links svg jquery-animate scale jquery-svg coordinate-transformation