SVGでハッチングパターン覚え書き

ウェブサイトはSVGを多用して美しく作成しよう。

さて、通常はIllustratorからsvg形式で書き出せばそのまま使用できるsvg画像ですが、時にはそれを改変して使用することも多い。<br>
Illustratorのアピアランスの塗りでハッチングが施されているとsvgに反映されなかったため、ハッチングパターンを作成して塗りに適用。

その覚え書きです。

## SVGハッチングパターンその1

```
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="100px" height="50px" viewBox="0 0 100 50" style="enable-background:new 0 0 100 50;" xml:space="preserve">
	<defs>
		<style type="text/css">
			.c1 { fill: #ddd; }
			.c2 { fill: #eee; }
			.rect1 { fill: url(#hatching1); }
		</style>
		<pattern id="hatching1" x="0" y="0" width="9" height="9" patternTransform="rotate(-45)" patternUnits="userSpaceOnUse" viewBox="0 0 9 9">
			<rect class="c1" x="0" y="0" width="9" height="9"/>
			<rect class="c2" width="9" height="2"/>
		</pattern>
	</defs>
	<rect class="rect1" x="0" y="0" width="100" height="50"/>
</svg>
```

## SVGハッチングパターンその2

```
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="100px" height="50px" viewBox="0 0 100 50" style="enable-background:new 0 0 100 50;" xml:space="preserve">
	<defs>
		<style type="text/css">
			.c1 { fill: #ddd; }
			.c2 { fill: #eee; }
			.rect2 { fill: url(#hatching2); }
		</style>
		<pattern id="hatching2" x="0" y="0" width="5" height="5" patternTransform="rotate(-45)" patternUnits="userSpaceOnUse" viewBox="0 0 5 5">
			<rect class="c1" x="0" y="0" width="5" height="5"/>
			<rect class="c2" width="5" height="1"/>
		</pattern>
	</defs>
	<rect class="rect2" x="0" y="0" width="100" height="50"/>
</svg>
```

SVGでハッチングパターン覚え書き

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他