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

Plesk

PleskでNextCloud(OwnCloud)セットアップとamazonS3接続で無限ストレージ

Docker

Docker for WindowsのVMイメージをCドライブ以外に作成

Docker

Dockerで OCI runtime create failed 。docker-compose.yml の volumes が原因？

ブラウザ

Firefoxのタイムアウト値変更

CSS

Windows10のIE11では正常表示だが、Windows7のIE11ではレイアウトが崩れる

CakePHP3

XAMPPが遅い。localhostでの開発が遅い。反応速度が悪い。IPv4の優先度を上げる

Plesk

Plesk n日以前の既読メールを削除

Plesk

Plesk postfixのメール送信失敗から再送までの動作。再送メールキューの扱い。

Plesk

Plesk Onyx で PHP Warning: fsockopen(): php_network_getaddresses: getaddrinfo failed: Name or service not known

Plesk

Plesk Onyx 17.5.3 から 17.8.11 へアップグレード

Plesk

Pleskで、システムのパッケージマネージャデータベースで不整合が検出されました。この問題を手作業で解決

Plesk

Plesk メールログ保管期間の延長

CSS

CSS フレックスボックス display:flex のまとめ

SVG

インラインSVGで隙間が出来たり、IEは小さくなったり、正常に表示されない

PHP

phpで、文字列を1文字ずつの配列に変換

Plesk

Pleskへの管理者アクセス制限IPアドレスを一括登録

Plesk

Pleskで、メールアドレス一括登録

Plesk

Pleskで、メールコンテンツを含ませずにメールの構成だけを保存

Plesk

Pleskで、/etc/httpd/logs/error_log　に　Can't locate CGI/Carp.pm　の記録

Plesk

Pleskでperl(CGI)がエラー。End of script output before headers 詳しい情報を知る方法

Plesk

Plesk で、顧客に紐づいているプロバイダを変更する

ECMAScript2015

ECMAScript2015の構文覚え書き

PHP

PHPでHTMLの構文チェック。終了タグ無しやタグの入れ子違いでエラーを出したい

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でテーマ作成

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

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

レンタルサーバー

3Dグラフィック

プログラミング記録QuickAnswer

ネイティブJavaScriptで書こう!

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

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

エーオーシステム

Copyright(C) ao-system エーオーシステム All rights reserved.

便利サイト☟

top of page