2015-01-07 10 views
6

静的画像の変数は必要ありませんが、変数、IMOですべてが定義されている場合は、検査して関連部分を参照する方が簡単です。また、画像の更新も簡単です。 See how you do the constrains-based engineering drawing in SolidWorks。基本的に、あるオブジェクトのサイズを他のオブジェクトのサイズ(または別のプロパティ)に対して相対的にします。同様に整数(幅)を定義したり、参照オブジェクトの幅を参照して別のオブジェクトの幅を設定することはできますか?SVGで変数を定義または参照するにはどうすればよいですか?

答えて

1

簡単な回答はありません。

グラデーション、マスク、パターン、フィルターなど、適用対象のオブジェクトに関連するものを定義できます。また、親SVGのサイズに関連していくつかの要素を定義することもできます。しかし、ある要素の形状を別の要素に対して相対的に定義することはできません。 SVGには変数などはありません。

できることは、Javascriptを使用してSVGを動的に生成(または変更)することです。

9

あなたが望むことはしますが、UAによって実装されるのではなく、完了することはまずありません。代わりに、SVGは、CSS Calcを使用できるCSSパラメータである属性に向かって移動するように見えます。

トンネルの終わりにはライトがありますが、この仕様は既にjavascriptシムによって実装されています。そのため、あなたが望むことをするライブラリに準備済みのドロップを持っている場合に使用します。

構文は次のようになります...

<object type="image/svg+xml" data="map.svg"> 
    <param name="x" value="125" /> 
    <param name="y" value="108" /> 
</object> 

または

<object type="image/svg+xml" data="map.svg?y=103&x=523"> 
</object> 

使用量は次のようになります...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320"> 
<script type="text/ecmascript" xlink:href="ref2.js" /> 

<ref id="paramX" param="x" default="-10"/> 
<ref id="paramY" param="y" default="-10"/> 

<circle id="coord" cx="url(#paramX)" cy="url(#paramY)" r="5" fill="tan" stroke="brown" stroke-width="3" /> 

ライブラリーを得ることができますfrom here