web-dev-qa-db-fra.com

Transformation SVG - Retourner horizontalement

Je dois retourner ce fichier SVG horizontalement - je ne trouve rien en ligne. C'est ici:

<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M 0,100 C 40,0 60,0 100,100 Z"/>
    </svg>

Toute aide appréciée, à la vôtre!

htmlcsssvgweb
5
Alex

Vous pouvez simplement définir une transformation pour inverser des objets, puis déplacer la forme (comme elle est inversée par rapport à l'origine).

<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
    </svg>

8
Robert Longson

Si vous pouvez utiliser CSS (cela ne fonctionnera pas lors de l'importation dans Inkscape à compter d'aujourd'hui), vous pouvez également utiliser une transformation d'échelle CSS, qui a l'avantage de le baser sur le centre de l'élément par défaut: transform: scale(-1,1);

<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>

0
Chris K.