SVGグラフィックスの調査を続けますが、今回は様式化について触れます。
パート1：
SVGグラフィックスの紹介 。
サンプルのデモンストレーション /
ソースのダウンロードSVG要素の外観の変更は、いくつかの機能を備えたHTMLに似ています。 たとえば、背景はbackground-colorではなく
fillプロパティによって割り当てられ、境界線は境界線ではなく
ストロークです。 Adobe Illustratorで作業した場合、同様の用語はおなじみです。
公式のSVG仕様によると
、プロパティはタグに直接追加できます。 たとえば、rect要素の
塗りつぶしと
ストローク ：
<svg> <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/> </svg>
また、プロパティをスタイルとして追加できます。 この例では、CSS3
変換プロパティが
fillおよび
strokeに追加されました。
<svg> <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/> </svg>
SVGはXMLマークアップに基づいているため、.svgドキュメントのスタイルをCDATAで囲む必要があります。そうしないと、デザインがXMLパーサーと競合します。 この例では、ホバー効果が追加されます。
<style type="text/css" media="screen"> <![CDATA[ #internal rect { fill: slategrey; stroke: black; stroke-width: 3; -webkit-transition: all 350ms; } #internal rect:hover { fill: green; } ]]> </style>
.svgドキュメントでは、外部スタイルはわずかに異なる方法で接続されています。
<?xml-stylesheet type="text/css" href="style.css"?>
gタグを使用してSVG要素をグループ化し、一般的なスタイルを適用できます。
<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="203" width="200" height="200"/> <circle cx="120" cy="106" r="100"/> </g>
これがSVGスタイリングのハイライトです。 ボーナスは、少し役に立つ読み物です。