CSS zum Drehen (Drehen) horizontal ein SVG von der Mitte funktioniert nur mit Bild

Question

Ich habe jemand gefunden jsfiddle dies mit einem Bild zu tun, aber es funktioniert nicht für meine SVG.

transform: rotateY(-360deg); 

Es dreht sich auf dem Rand ganz links anstelle des Zentrums. Ich nehme an, das liegt daran, dass SVG-Pfade anders funktionieren als ein Bild aber ...

Ist das ein Workaround um das SVG wie das Bild drehen zu lassen, von der Mitte?

Meine Geige Problem zu veranschaulichen: https://jsfiddle.net/t0bz/Ldm0ytft/

Answer 1

Seine spezifische SVG CSS Transformation. Sie können darüber lesen here.

Sie müssen transform-origin Eigenschaft definieren.

`transform-origin: center center; ` 

https://jsfiddle.net/Ldm0ytft/2/

Answer 2

Alles, was Sie tun müssen, ist transform-origin Eigenschaft hinzufügen und es sollte gut funktionieren.

transform-origin: center center; 

Demo

---

einfach hinzufügen, warum es nicht genau in Ihrem Beispiel arbeiten, weil Sie class="slidecaption" auf path verwenden, aber Sie müssen es auf Ihrem svg Element verwenden.

Demo (ohne transform-origin Eigenschaft)

Answer 3

Die transformations Herkunft Eigenschaft können Sie die Position von transformierten Elemente ändern.

2D-Transformationen können die X- und Y-Achse eines Elements ändern. 3D Transformationen können auch die Z-Achse eines Elements ändern.

So können Sie es verwenden transform-origin: center center;

Auch hier Tabelle ist Browser-Unterstützung, wenn Sie über die Verwendung in alten Browsern Sorge:

`

Für weitere Informationen über transformations Herkunft, Besuchen Sie here