web-dev-qa-db-ja.com

SVG変換-水平方向に反転

このSVGを水平に反転する必要があります-オンラインで何かを見つけることができません。ここにあります：

<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>

助けていただければ幸いです！

htmlcsssvgweb
10
Alex

変換を設定して物事を反転させてから、シェイプを移動できます（Originを中心に反転します）。

<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>
14
Robert Longson

CSSを使用できる場合（今日の時点でInkscapeにインポートすると機能しません）、CSSスケール変換も使用できます。これは、デフォルトで要素の中心に基づいているという利点があります：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>
2
Chris K.