情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

SVG入門(5)図形の外観の指定方法

2016/10/12

この記事は「SVG入門」という連載記事の5つ目の記事です。

その他の記事に関しては下を参照してください。

はじめに

今までの例では図形の外観を指定するのにstyle属性を使用してきましたが、図形の外観を指定するには他に3つの方法があります。

今回は図形の外観の指定方法について纏めます。

方法

図形の外観を指定する方法には下の4つの方法があります。

  • インラインスタイル
  • 内部スタイルシート
  • 外部スタイルシート
  • 属性

インラインスタイル

今までの例で使用してきた、図形のstyle属性にプロパティを指定する方法です。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" >
    <polygon points="48 16 16 96 96 48 0 48 80 96" style="stroke: red; stroke-width: 2; fill: yellow;"></polygon>
</svg>

内部スタイルシート

SVGファイルの内部にスタイルシート(外観の定義)を記述する方法です。

スタイルシートを記述するには<style>要素を使用します。

<style>要素のtype属性の値をtext/cssとし、要素の中にCSSと同じようにスタイルを記述します。

ただし、<style>要素は<defs>要素の中に格納しなければなりません。<defs>要素はSVG画像における様々な定義を格納するための要素です。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" >
    <defs>
        <style type="text/css">
.star {
    stroke: red;
    stroke-width: 2;
}
#pentagram {
    fill: lightgreen;
}
        </style>
    </defs>
    <polygon id="pentagram" class="star" points="48 16 16 96 96 48 0 48 80 96"></polygon>
</svg>


クラス名を付けたスタイルを使用するには図形のclass属性にクラス名を指定します。複数のクラス名は空白で区切ります。

IDを付けたスタイルを使用するには図形のid属性にIDを指定します。

外部スタイルシート

SVGファイルとは別の、スタイルシート専用のファイルにスタイルを記述する方法です。

外部スタイルシートを読み込むには<?xml-stylesheet>要素を使用します。

<?xml-stylesheet>要素のhref属性の値を外部スタイルシートのアドレスとし、type属性の値をtext/cssとします。

属性

図形の属性として外観を指定する方法です。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" >
    <polygon points="48 16 16 96 96 48 0 48 80 96" stroke="red" stroke-width="2" fill="blue"></polygon>
</svg>

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-svg