Looking for svg Keywords? Try Ask4Keywords

SVGTransformation


Bemerkungen

Grafische Elemente können durch Hinzufügen eines Transformationsattributs geändert werden.

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

Anstatt den oberen linken Ursprung in Koordinaten (0, 0) zu rendern, wird er ab Punkt (10, 10) nach unten und rechts angezeigt.

Ganze Elementgruppen können zusammen transformiert werden, und Transformationen können sich gegenseitig ergänzen.

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

Zunächst wird jeder Punkt des Kreises mit dem Faktor 3 in Bezug auf den Ursprung skaliert, wodurch der Mittelpunkt des Kreises bei (15, 15) zur Mitte des Rechtecks ​​und sein Radius auf 15 gebracht werden Der Kreis wird zusammen um 45 Grad im Uhrzeigersinn um den Ursprung gedreht.

Transformation Verwandte Beispiele