web-dev-qa-db-ja.com

SVGオブジェクトのスケーリングとミラーリング

最初にオブジェクトを現在のサイズの2 *倍にして、垂直方向と水平方向、またはその両方で反転させるなど、最も簡単にオブジェクトをスケーリングするにはどうすればよいですか？

現在のところ、幅と高さの2倍になるように「scale（2,2）」を設定できますが、垂直反転のscale（-1、1）と同じように反転することはできません。

エクスポート先の形式として、プログラムでSVGオブジェクトを作成しています。

svgmatrixscaleflip
47
Deukalion

スケールとフリップの両方を適用するには、トランスフォームに両方をリストします。

transform="scale(2,2) scale(-1,1)"

または単に値を組み合わせます

transform="scale(-2,2)"

もちろん、負のスケールに関する問題は、オブジェクトがSVGの原点（左上）で反転されるため、ドキュメントの端から外れることです。翻訳を追加して、これを修正する必要があります。

たとえば、100x100のドキュメントがあるとします。

<svg width="100" height="100">
    <polygon points="100,0,100,100,0,100"/>
</svg>

これを垂直に反転させるには：

<polygon points="100,0,100,100,0,100" transform="scale(2,-2)"/>

そして、画面外の動きを修正するために、フリップの前にそれを負にシフトします（それで画面上で元に戻ります）：

<polygon points="100,0,100,100,0,100" transform="scale(2,-2) translate(0,-100)"/>

（変換リストは右から左に効果的に適用されるため、ここでは翻訳が2番目にリストされています）

または、後で（拡大縮小サイズで）正にシフトできます。

<polygon points="100,0,100,100,0,100" transform="translate(0,200) scale(-2,2)"/>

これは、垂直フリップ、水平フリップ、および両方のフリップを示すデモです

更新

画面のどこかにある既存のオブジェクトを（位置で）反転させる。最初にその境界ボックスを決定します（minX、minY、maxX、maxY）、またはcentreX、centreY代わりに既に知っている場合。

次に、以下をトランスフォームに追加します。

translate(<minX+maxX>,0) scale(-1, 1)   // for flip X
translate(0,<minY+maxY>) scale(1, -1)   // for flip Y

または、センターがある場合は使用できます

translate(<2 * centreX>,0) scale(-1, 1)   // for flip X

あなたの例では：

<rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

minX + maxXは200になります。したがって、水平方向に反転するには、次のように追加します。

translate(200,0) scale(-1, 1)

したがって、最終オブジェクトは次のようになります。

<rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

デモはこちら

94
Paul LeBeau

ここ は、Livescript風のコードスニペットで、任意の要因で水平方向に反転およびスケーリングできます。

    # scale is 1 by default

    if mirror or scale isnt 1
        [minx, miny, width, height] = svg.attributes.viewBox |> split-by ',' |> cast-each-as (Number)

        s = scale
        # container is the root `g` node 
        container.attributes.transform = if mirror
            "translate(#{s * (width + minx) + minx}, #{-miny * (s-1)}) scale(#{-s},#{s})"
        else
            "translate(#{-minx * (s-1)}, #{-miny * (s-1)}) scale(#{s},#{s})"

        if scale isnt 1
            svg.attributes
                ..viewBox = "#{minx},#{miny},#{width * scale},#{height * scale}"
                ..width = "#{width * scale}"
                ..height = "#{height * scale}"
0
ceremcem