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

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

カテゴリー：SVG

記事作成日：2017.09.03

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

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

その覚え書きです。

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

```nohighlight
<?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 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

```nohighlight
<?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 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>

CONTENTS

CakePHP3

CakePHP3ではDATE型フィールドのタイムゾーンはUTCになる

ECMAScript2015

初めてのECMAScript2015とBabel

SVG

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

Plesk

古いMacのChromeでサイトが見れない。ERR SPDY INADEQUATE TRANSPORT SECURITY

WebAssembly

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成

WebAssembly

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。Cからwasm生成

Plesk

Plesk RoundCubeで特定のユーザーだけ画面真っ白。ブランクページの表示。date.timezone設定。

Plesk

エラーメッセージ connect() failed (111: Connection refused) while connecting to upstream

ウェブサーバー

メール送信が拒否 550 5.7.606 Access denied. mail.protection.outlook.com

ウェブサーバー

大量の404アクセス。Microsoft Office Protocol Discovery

CakePHP2

CakePHP2をサーバー移転したらエラー。open_basedir restriction in effect

Plesk

Plesk ModSecurity ルールセットの更新に失敗　modsecurity_ctl failed

CakePHP3

CakePHP3で、PHP Parse error: syntax error, unexpected T_USE, expecting

Plesk

Pleskでロードアベレージ確認

CakePHP3

CakePHP3 HTMLラジオボタンでlabelの位置がCakePHP2と違う。inputタグを制御できない

Plesk

Pleskでcomposer プレスクでコンポーザーを使用

CakePHP3

CakePHP3 imgタグじゃないimgのアドレス(パス)を得る。拡張子を指定する

CakePHP3

CakePHP3 日付の表示が年/月/日 (YYYY-MM-DD) じゃない

Plesk

Plesk環境のウェブサーバーでintl.soが古い? ICUが古い?

CakePHP3

CakePHP3 バリデーションでフィールドの値がユニークかチェック

CakePHP3

CakePHP3 データベース更新ログをビヘイビアで作成

CakePHP3

CakePHP3 で intl ICU がエラー。問題箇所はCORE/src/Utility/Text.php

CakePHP3

CakePHP3 Controller/AppControllerのサブクラスを間に挟む

CakePHP3

CakePHP3 Model/Entityのサブクラスを間に挟む

CakePHP3

CakePHP3 Model/Entityで自分のテーブル名を知る。及び、フィールドの最大値をセットするコード

CakePHP3

CakePHP3でテーマ作成

このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。

■ 便利サイト

半透明マルチアイコン、ファビコン作成

ファビコン一括生成

ファビコン作成

JavaScriptでファビコン

ウインドウズアイコン作成

マルチアイコン作成

Exif情報表示

ジグソーパズル作成

BOXカバー画像作成

DVDカバー画像作成

QRコード作成

QRコード作成フォーム設置

VisualStudioカラーコード表

基礎代謝量計算

バイオリズム計算

西暦和暦干支年齢一覧

レターアート

GIFアニメ作成

画像縮小回転

文章の文字数を数える

半角カナを全角に変換

全角文字チェッカー

JavaScriptコンパクト化

CSSコンパクト化

HTMLコンパクト化

ExcelからHTMLテーブル変換

HTMLテーブル構造ジェネレーター

base64エンコード、インラインイメージ

エンティティ変換

メールアドレスをJavaScript化

ユーザーエージェント,IPアドレス

CIDR/サブネットマスク IPアドレス計算

.htpasswd作成ベーシック認証

ラーメンどんぶり研究所

エーオーシステムトップページ

レンタルサーバー

3Dグラフィック

プログラミング記録QuickAnswer

ネイティブJavaScriptで書こう!

自動ブラウザ
サイトロジー2

アニメーションGIF作成
ストライダー

エーオーシステム

Copyright© ao-system エーオーシステム All rights reserved.

便利サイト☟

top of page