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

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】CSSの記述

色や線などの属性をスタイルと呼びます。SVGのスタイルは、CSSとして記述することができます。スタイルの記述は、SVG文書から分離して別ファイルにすることができます。スタイルの記述と別ファイルの読み込みについて見ていきます。

CSSファイルの読み込み

スタイルをCSSファイルに記述し、別ファイルとして読み込む。

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- CSSファイルの読み込み -->
<?xml-stylesheet type="text/css" href="sample.css"?>
<rect x="10" y="10" width="80" height="50"/>
</svg>
/* sample.css */
rect { fill: blue; }

SVGファイル内にスタイルを記述する

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- スタイルの記述 -->
<style type="text/css">
  rect { fill: green; }
</style>
<rect x="10" y="10" width="80" height="50"/>
</svg>

スタイルのルール

CSSの記述ルールに則り、スタイルを指定する。クラスセレクタ、IDセレクタ、子孫セレクタなどを使い、どの箇所にスタイルをかけるのか指定する。

/* セレクタ { 属性名: 属性値; } */
rect { fill: red; }

/* .クラス名 { 属性名: 属性値; } */
.sample { fill: green; }

/* #id名 { 属性名: 属性値; } */
#sample { fill: blue; }

主要なプロパティ

  • 色と不透明度に関するプロパティ
    • fill:塗りつぶしの色
    • stroke:線の色
    • opacity:塗りつぶし内部の不透明度
    • stroke-opacity:線の不透明度
  • 線に関するプロパティ
    • stroke-width:線の幅
    • stroke-linecap:端点の形状
    • stroke-linejoin:接続点の形状
    • stroke-dasharray:破線のパターン
  • テキストに関するプロパティ
    • font-size:フォントの大きさ
    • font-family:フォントの名前
    • font-weight:フォントの太さ
    • font-style:フォントのスタイル
    • text-decoration:テキストの装飾
    • word-spacing:単語の間隔
    • letter-spacing:文字の間隔
    • text-anchor:テキストの配置

まとめ

SVGのスタイルの記述と別ファイルの読み込みについて書きました。また、主要なプロパティについて簡単にご紹介しました。詳細に関しては、各自で調べてください。