元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【SVG】path要素を分割して個別にスタイルを適用する

複数の図形が書かれているのに、1つのpath要素で構成しているSVGファイルがある場合があります。この状態ですと個別にスタイルを指定できません。そこで、path要素を分割します。

サンプルデータ(SVG)

SVGの素材サイト*1から以下のようなフォークとナイフのSVGをダウンロードしました。

このSVGのコードは以下です。一部を抜粋します。

<path id="path11774" d="M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5&#xA;&#x9;c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z M12,0&#xA;&#x9;c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1&#xA;&#x9;s1,0,1-1V0z"/>

図形は2つあるのにもかかわらず、path要素1つで構成されています。つまり、path要素1つで2つの図形が書かれています。フォークとナイフに別々のスタイルをあてたいので、path要素を2つに分割します。

path要素を分割する

path要素は、d属性で指定します。d属性では、線を引くためのコマンドを指定します。ここでは、コマンドについて説明しません。今回、重要なのは、M(m)コマンドとZ(z)コマンドです。Mコマンドは初期位置、zコマンドは直近の初期位置まで線を引いて線を閉じるコマンドです。つまり、Mからzまでで1つの図形を表します。この部分を切り取り、path要素を分割します。

上記のコードを分割すると以下のようになります。

<!-- フォーク -->
<path d="M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5&#xA;&#x9;c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z"/>

<!-- ナイフ -->
<path d="M12,0&#xA;&#x9;c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1&#xA;&#x9;s1,0,1-1V0z/>

個別にスタイルを適用する

path要素を2つに分割したので、個別にスタイルを適用できるようになりました。path要素にスタイルを直接指定しても良いですし、それぞれにid名を付与して、use要素で参照する際にスタイルを適用しても良いです。

スタイルを直接指定する

<path d="M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5&#xA;&#x9;c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z" fill="red"/>

<path d="M12,0&#xA;&#x9;c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1&#xA;&#x9;s1,0,1-1V0z" fill="green"/>

use要素で参照後、スタイルを適用する

<path d="M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5&#xA;&#x9;c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z" id="fork"/>

<path d="M12,0&#xA;&#x9;c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1&#xA;&#x9;s1,0,1-1V0z" id="knife"/>

<use href="#fork" fill="green"/>
<use href="#knife" fill="blue"/>

参考サイト

*1:参考サイトをご確認ください。

» HTML入門のまとめはこちらです。