「SVG」の版間の差分
削除された内容 追加された内容
表記の修正 |
グループ化など |
||
622 行
各種の座標の位置は、相対位置であり、前の命令の終わった時点からの相対位置です。
== 構造化 ==
=== グループ化 ===
g タグを用いて、gタグ内のオブジェクトに共通する属性を一括で記述できます。このような仕組みをSVG用語では一般に「グループ化」といいます。
<syntaxhighlight lang="xml">
<svg>
<g stroke="blue" fill="white" >
<rect x="1" y="1" width="100" height="100" stroke-width="5" />
<circle cx="30" cy="30" r="10" stroke-width="3" />
</g>
</svg>
</syntaxhighlight>
たとえば上のコードの場合、長方形と円との両方に、ストロ－ク色を青に指定し、内側の塗りつぶし色を白に指定と、一括で指定しています。
;各オブジェクトとグループ内要素に矛盾のある場合
なお、各オブジェクトにgタグの指定内容と矛盾する属性がある場合、普通は各オブジェクト側の指定が優先されます。たとえばcircleタグで <code> stroke="red"</code> という指定と、gタグの開始タグで <code> stroke="blue"</code> があれば、円のストローク色は赤色で表示されます。（Firefox, google Chrome, Microsfot Edge どれも結果は同じく、円ストロークだけ赤色の結果です。 ）
=== CSSとの組み合わせ ===
SVGのgタグを使わなくても、CSSとHTMLのクラスclassを使っても、共通する属性を一括で記述することができます。ただし、各オブジェクトごとに、クラスを指定する必要があります。
<syntaxhighlight lang="xml">
<style type="text/css">
.test {
stroke: red;
fill: white;
}
</style>
<svg>
<rect x="1" y="1" width="100" height="100" stroke-width="5" class="test" />
<circle cx="30" cy="30" r="10" stroke-width="3" class="test" />
</svg>
</syntaxhighlight>
class 属性で、指定したスタイルを呼び出すのを忘れないようにしてください。
;各オブジェクトとスタイルに矛盾のある場合
なお、CSS側とsvgオブジェクト側の属性で矛盾する内容がある場合（たとえばストローク色が違う場合など）、CSS側の指定が優先されます。（Firefox, google Chrome, Microsfot Edge どれも結果は同じで、CSS側のスタイルが優先されます。 ）
属性の記述を順序を <code> class="test" stroke="blue" </code>と書こうが、<code> stroke="blue" class="test" </code>と書こうが、2020年7月の時点ではCSS側のスタイルがどのブラウザでも優先されます。
== 参考文献 ==
| |||