2

複数のグラフィカル レイヤーで構成された、かなり複雑な SVG インターフェイスを作成しようとしています。

viewBox 属性を使用して、ブラウザー ウィンドウのサイズを変更するときに、一部のレイヤー (つまり、SVG 内の "g" 要素) を引き延ばしたいと考えています。同じ SVG 内の他のレイヤーは、個別にスケーリングまたは処理する必要があります。そして、それが私が問題に遭遇するところです。

私は次のことができるようにしたいと思っていました：

<svg>
    <g name="stretchable" width="900px" height="500px" viewBox="0px 0px 900px 500px">
        ...insert stretchable shapes here...
    </g>
    <g name="non-stretchable">
        ...insert other shapes here...
    </g>
</svg>

...次に、viewBox 属性を操作して、「伸縮可能な」g 要素のみを伸縮します。しかしどうやら、viewBox 属性は g 要素には適用されません。

SVG 内の特定の "g" 要素を引き伸ばす他の方法はありますか? SVG 全体を引き伸ばす必要はありませんか?

4

1 に答える 1

2

<svg>要素の代わりに要素を使用しないのはなぜですか<g>。viewBox 属性を使用できます。

それがうまくいかない場合は、要素に transform="scale(x,y)" を追加していつでも試すことができます<g>。x と y は、計算する必要がある数値スケール ファクターです。

ところで<g>、要素は幅または高さの属性をサポートしていませんが、要素はサポートしていませ<svg>ん。

于 2013-04-02T14:04:50.943 に答える