Ich muss die Größe bestimmter Elemente im SVG-Dokument mithilfe von Javascript ändern und drehen. Das Problem ist, dass standardmäßig immer die Transformation um den Ursprung (0, 0)
oben links angewendet wird.
Wie kann ich diesen Transformationsankerpunkt neu definieren?
Ich habe versucht, das transform-origin
Attribut zu verwenden, aber es hat keine Auswirkungen.
So habe ich es gemacht:
svg.getDocumentById('someId').setAttribute('transform-origin', '75 240');
Es scheint nicht, dass der Drehpunkt auf den von mir angegebenen Punkt gesetzt wird, obwohl ich in Firefox sehen kann, dass das Attribut korrekt gesetzt ist. Ich habe Dinge wie center bottom
und 50% 100%
mit und ohne Klammern ausprobiert . Bisher hat nichts funktioniert.
Kann jemand helfen?
svg
coordinate-transformation
CTheDark
quelle
quelle
Antworten:
Zum Drehen verwenden Sie
transform="rotate(deg, cx, cy)"
, wobei deg der Grad ist, den Sie drehen möchten, und (cx, cy) den Drehpunkt definieren.Zum Skalieren / Ändern der Größe müssen Sie mit (-cx, -cy) übersetzen, dann skalieren und dann zurück nach (cx, cy) übersetzen. Sie können dies mit einer Matrixtransformation tun :
Wobei sx der Skalierungsfaktor auf der x-Achse ist, sy auf der y-Achse.
quelle
Wenn Sie einen festen Wert verwenden können (nicht "Mitte" oder "50%"), können Sie stattdessen CSS verwenden:
Einige Browser (wie Firefox) verarbeiten relative Werte nicht korrekt.
quelle
element.setAttribute('transform-origin', '25px 25px')
?Wenn Sie wie ich sind und mit transform-origin schwenken und dann zoomen möchten, benötigen Sie etwas mehr.
Hier funktioniert es: http://forresto.github.io/dataflow-prototyping/react/
quelle
id
Übereinstimmungen im AttributgetElementById
und im Dokumentattributid="..."
. Es ist schwer sicher zu wissen, ohne den Code zu sehen. Wenn Sie es nicht als SO-Frage veröffentlichen möchten, können Sie versuchen, das einfachste Beispiel mit Ihren Attributnamen zu erstellen, bis es funktioniert / Sie das Problem finden, und den Rest wieder hinzufügen.Zum Skalieren, ohne die
matrix
Transformation verwenden zu müssen:Und hier ist es in CSS:
quelle
es sieht so aus, als hätten wir alle hier einen Trick verpasst:
transform-box: fill-box
Mit using
transform-box: fill-box
verhält sich ein Element in einer SVG wie ein normales HTML-Element. Dann können Sie sich wie gewohnt bewerbentransform-origin: center
(oder etwas anderes)Das ist richtig,
transform-box: fill-box
keine Notwendigkeit für komplizierte Matrix-Sachenquelle
Ich hatte ein ähnliches Problem. Aber ich habe D3 verwendet, um meine Elemente zu positionieren, und wollte, dass die Transformation und der Übergang von CSS übernommen werden. Dies war mein ursprünglicher Code, den ich in Chrome 65 zum Laufen gebracht habe:
Das erlaubte mir , die zu setzen
cx
,cy
undtransform-origin
Werte in Javascript , die gleichen Daten.ABER das hat in Firefox nicht funktioniert! Was ich tun musste, war das
circle
in dasg
Tag zu wickeln undtranslate
es mit der gleichen Positionierungsformel von oben zu verwenden. Ich habe dann dascircle
img
Tag angehängt und seinecx
undcy
Werte auf gesetzt0
. Von dorttransform: scale(2)
würde wie erwartet vom Zentrum aus skaliert. Der endgültige Code sah so aus.Nachdem ich diese Änderung vorgenommen hatte, änderte ich mein CSS so, dass es auf das Ziel
circle
anstatt auf das.dot
abzielte, das hinzuzufügentransform: scale(2)
. Ich brauchte nicht einmal Gebrauchtransform-origin
.ANMERKUNGEN:
Ich benutze
d3-selection-multi
im zweiten Beispiel. Dadurch kann ich ein Objekt übergeben,.attrs
anstatt es.attr
für jedes Attribut zu wiederholen .Beachten Sie bei der Verwendung eines Zeichenfolgenvorlagenliteral die Zeilenumbrüche, wie im ersten Beispiel dargestellt. Dies enthält eine neue Zeile in der Ausgabe und kann Ihren Code beschädigen.
quelle
svg:transform-origin.enabled
Einstellungen auf der Firefox-about:config
Seite geändert habe . Aber ... das schien keine adäquate Lösung zu sein. Ich fand auch eine Diskrepanz zwischentransform-origin: 50% 50%
undtransform-origin: center center
.