トップページ >  HTML5 >  svg要素(2)　色とスタイル
初版2011/08/06： 最終更新日2011/08/06
svg要素(2)　色とスタイル
目次
・色を指定する
・半透明度を指定する
・線のスタイルを指定する
・塗りつぶしルールを指定する
・影を指定する
色を指定する

<svg>要素の線色のデフォルトは、黒となります。
また塗りつぶし色のデフォルトも、黒となります。

各図形の要素(<line>要素や<circle>要素など)は以下の属性を設定することで線色や塗りつぶしを指定することができます。

stroke属性
線色を指定します。
fill属性
塗りつぶし色を指定します。

colorに指定する色はCSSで指定するフォーマットに対応しています。
例えば
"orange"、"#ff0000"や"rgb(192, 80, 77)"などです。

線色や塗りつぶしを行わない場合は、「none」を指定します。

リスト1. 色の指定

<!-- 色名で指定。線色=赤 / 塗りつぶし=緑 -->
<circle cx="150" cy="100" r="80" stroke="red" fill="green" />

<!-- 16進で指定。線色=緑 / 塗りつぶし=青 -->
<circle cx="250" cy="100" r="80" stroke="#00ff00" fill="#0000ff" />

<!-- 10進で指定。線色=青 / 塗りつぶし=赤 -->
<circle cx="350" cy="100" r="80" stroke="rgb(00,00,255)" fill="rgb(255,00,00)" />

コーディング例

半透明度を指定する

<svg>要素の塗りつぶしは、半透明度を変更することが可能です。
デフォルトは、不透明(半透明度=1)です。
透明(半透明度=0)～不透明(半透明度=1)まで設定することが出来ます。

半透明度の設定方法は、CSS3の「rgba()」を用いる方法と「stroke-opacity」属性や「fill-opacity」属性を用いる方法の二つがあります。

線色を変更する

stroke-opacity属性
半透明度(0.0～1.0)を指定します。
stroke属性での"rgba(r,g,b,a)"の利用
CSS3の透過色の指定方法を用います。
r=赤(0～255)、g=緑(0～255)、b=青(0～255)、a=半透明度(0.0～1.0)で指定します。

塗りつぶし色を変更する

fill-opacity属性
半透明度(0.0～1.0)を指定します。
fill属性での"rgba(r,g,b,a)"の利用
CSS3の透過色の指定方法を用います。
r=赤(0～255)、g=緑(0～255)、b=青(0～255)、a=半透明度(0.0～1.0)で指定します。

リスト2. 「rgba()」にて、半透明度を指定

<!-- rgbaで指定。線色=赤(0.3) / 塗りつぶし=緑(0.8) -->
<circle cx="150" cy="100" r="80" stroke="rgba(255,00,00,0.3)" fill="rgba(00,255,00,0.8)" />

<!-- rgbaで指定。線色=緑(0.5) / 塗りつぶし=青(0.5) -->
<circle cx="250" cy="100" r="80" stroke="rgba(00,255,00,0.5)" fill="rgba(00,00,255,0.5)" />

<!-- rgbaで指定。線色=青(0.8) / 塗りつぶし=赤(0.3) -->
<circle cx="350" cy="100" r="80" stroke="rgba(00,00,255,0.8)" fill="rgba(255,00,00,0.3)" />

コーディング例

リスト3. 「stroke-opacity」属性や「fill-opacity」属性にて、半透明度を指定

<!-- 色名で指定。線色=赤(0.8) / 塗りつぶし=緑(0.3) -->
<circle cx="150" cy="100" r="80" stroke="red" fill="green" stroke-opacity="0.8" fill-opacity="0.3" />
<!-- 16進で指定。線色=緑(0.5) / 塗りつぶし=青(0.5) -->
<circle cx="250" cy="100" r="80" stroke="#00ff00" fill="#0000ff" stroke-opacity="0.5" fill-opacity="0.5" />
<!-- 10進で指定。線色=青(0.3) / 塗りつぶし=赤(0.8) -->
<circle cx="350" cy="100" r="80" stroke="rgb(00,00,255)" fill="rgb(255,00,00)" stroke-opacity="0.3" fill-opacity="0.8" />

コーディング例

線のスタイルを指定する

<svg>要素は、線の幅、端部及び接合部のスタイルを指定ができます。
<canvas>要素では指定できなかった、点線などの線種の指定も<svg>要素では可能です。

stroke-width属性
線の幅を指定します。
指定できるのは0以上数値(単位指定あり)です。
0の場合は、線を表示しません。
負の値は、エラーとなります。(表示されない)
既定値は「1」です。
stroke-linecap属性
線の端部を指定します。
形状は、butt(端部でフラット)、round(端部で丸め)、square(端部で囲み)の3種です。
デフォルトは、butt です。
stroke-linejoin属性
線の接合部を指定します。
形状は、bevel(面取り)、round(丸め)、miter(面取りしない)の3種です。
デフォルトは、miter です。
stroke-miterlimit属性
stroke-linejoin="miter"の場合、接合部の尖りの限界比率を指定します。
限界を越えた時点で、stroke-linejoin="bevel"と同様になります。
限界点 = lineWidth × miterLimit
デフォルトは、4.0 です。
stroke-dasharray属性
線のダッシュパターンを指定します。
コンマ／空白区切りの長さパターンのリストを指定することで点線や破線、一点(二点)鎖線を表現します。
ダッシュと間隔の長さを交互に指定します。
例1) 点線 : "2 4" 例2) 破線 : "10 4" 例3) 一点鎖線 : "10 6 2 6" 例4) 二点鎖線 : "10 6 2 4 2 6" デフォルトは、none です。
またパーセント表示により、現在の表示領域に対する
stroke-dashoffset属性
線のダッシュパターンがパスに対するオフセット距離を指定します。
デフォルトは、0 です。
marker属性、marker-start属性、marker-mid属性、marker-end’属性
後述の「<marker>要素」を指定することで、線の端部(及び中間)に矢印などのマーカーを指定することができます。

<marker>要素

<marker>要素とは、矢印やピボットなど線の端部に配置する図形を定義する要素です。
<marker>要素に、矢印やピボットなどの図形要素を配置します。

markerUnits属性
markerを配置するときの座標系を定義します。
markerUnits="strokeWidth" と指定された場合、マーカで定義された長さ１のグラフィックは、ストローク幅に等しい長さに描画されます。
markerUnits="userSpaceOnUse" と指定された場合、マーカを参照しているグラフィックスオブジェクトにおける利用座標系で描画されます。
デフォルトは、strokeWidth です。
refX属性、refY属性
markerの配置基準点の座標(refX,refY)を指定します。
省略すると(0,0)となります。
markerWidth属性、markerHeight属性
markerの表示する際の幅(markerWidth)及び高さ(markerWidth)を指定します。
省略すると3となります。
orient属性
marker配置時の回転方法を指定します。
orient="auto"とすると、線に沿って自動的に回転します。
角度(ラジアン)指定することもできます。
省略するとautoとなります。

リスト4. 線の幅を指定

<!-- 線幅=1(デフォルト) -->
<line x1="50" y1="20" x2="450" y2="20"/>

<!-- 線幅=3px -->
<line x1="50" y1="50" x2="450" y2="50" stroke-width="3px"/>

<!-- 線幅=3mm -->
<line x1="50" y1="80" x2="450" y2="80" stroke-width="3mm"/>

<!-- 線幅=0.3em -->
<line x1="50" y1="110" x2="450" y2="110" stroke-width="0.3em"/>

<!-- 線幅=3% -->
<line x1="50" y1="140" x2="450" y2="140" stroke-width="3%"/>

コーディング例

リスト5. 端部を指定

<!-- フラットな端部(デフォルト) -->
<line x1="50" y1="20" x2="450" y2="20" />
<!-- 丸めた端部 -->
<line x1="50" y1="100" x2="450" y2="100" stroke-linecap="round" />
<!-- 囲まれた端部 -->
<line x1="50" y1="180" x2="450" y2="180" stroke-linecap="square" />

コーディング例

リスト6. 接合部を指定

<!-- 面取りのない接合部(デフォルト) -->
<polyline points="50,150 100,50 150,150" />

<!-- 面取りした接合部 -->
<polyline points="200,150 250,50 300,150" stroke-linejoin="bevel" />

<!-- 丸めた接合部 -->
<polyline points="350,150 400,50 450,150" stroke-linejoin="round" />

コーディング例

リスト7. ダッシュパターンを指定

<!-- 直線(デフォルト) -->
<line x1="50" y1="20" x2="450" y2="20" />

<!-- 点線 -->
<line x1="50" y1="50" x2="450" y2="50" stroke-dasharray="2 4" />

<!-- 点線 -->
<line x1="50" y1="80" x2="450" y2="80" stroke-dasharray="10 4" />

<!-- 一点鎖線 -->
<line x1="50" y1="110" x2="450" y2="110" stroke-dasharray="10 6 2 6" />

<!-- 二点鎖線 -->
<line x1="50" y1="140" x2="450" y2="140" stroke-dasharray="10 6 2 4 2 6" />

コーディング例

リスト8. ダッシュのオフセット距離を指定

<!-- オフセット無し -->
<line x1="50" y1="20" x2="450" y2="20" />

<!-- オフセット 3px -->
<line x1="50" y1="50" x2="450" y2="50" stroke-dashoffset="3px" />

<!-- オフセット -5px -->
<line x1="50" y1="80" x2="450" y2="80" stroke-dashoffset="-5px" />

<!-- オフセット 10px -->
<line x1="50" y1="110" x2="450" y2="110" stroke-dashoffset="10px" />

コーディング例

リスト9. マーカーの適用

<defs>
	<!-- マーカーを定義 -->
	<marker id="Triangle"
		viewBox="0 0 10 10" refX="0" refY="5" 
		markerUnits="strokeWidth"
		markerWidth="4" markerHeight="3"
		orient="auto">
		<path d="M 0 0 L 10 5 L 0 10 z" stroke-width="1" fill="black" />
	</marker>
</defs>
<!-- マーカーを適用 -->
<polyline points="50,80 250,80 300,150" marker-end="url(#Triangle)" />

コーディング例

影を指定する

<svg>要素は、フィルタ効果をつけることで図形に影などを指定ができます。
<filter>要素を別途用意し、該当の図形要素に適用します。

フィルタはいくつかの原始フィルタを組み合わせて、独自のフィルタを<filter>要素で定義します。
図形では「filter属性」を用いて、作成したフィルタを適用します。

リスト10. 影を指定

<defs>
	<!-- フィルタの組み合わせを定義する -->
	<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="200">
		<!-- ソースグラフィックのアルファチャンネル SourceAlpha から始める -->
		<!-- 原始フィルタ ガウスぼかし 名前 "blur" とする -->
		<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
		<!-- 原始フィルタ ぼかしのオフセット "blur"を(dx,dy)でオフセットし、名前"offsetBlur"にする -->
		<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
		<!-- 原始フィルタ 点光源(feSpecularLighting)による照明効果を生成し、名前"specOut"にする -->
		<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
							specularExponent="20" lighting-color="#bbbbbb"  
							result="specOut">
			<fePointLight x="-5000" y="-10000" z="20000"/>
		</feSpecularLighting>
		<!-- 原始フィルタ 元図"SourceAlpha"と"specOut"から、名前"specOut"にする -->
		<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
		<!-- 原始フィルタ 元図"SourceAlpha"と"specOut"を合成し、名前"litPaint"にする -->
		<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
					 k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
		<!-- ぼかしと点光源を合成する -->
		<feMerge>
			<feMergeNode in="offsetBlur"/>
			<feMergeNode in="litPaint"/>
		</feMerge>
	</filter>
</defs>
<rect x="20" y="20" width="200" height="100" filter="url(#MyFilter)" stroke="yellow" fill="yellow" />
<circle cx="300" cy="100" r="80" filter="url(#MyFilter)" stroke="red" fill="red" />

コーディング例

HOME