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 phpのexecでphp実行。Imagick使用

NextCloud

Plesk拡張でNextcloudセットアップ軽量化を目指す

JavaScript

GoogleAnalyticsでイベントトラッキング一括設定 gtag.js

ウェブサーバー

MJ12botからのアクセスを禁止する

CakePHP3

20110#0: * connect() failed (111: Connection refused) while connecting to upstream

Android

Androidアプリ開発で net::ERR_CLEARTEXT_NOT_PERMITTED のエラー発生

ブラウザ

各ブラウザでの強制リロード(スーパーリロード)まとめ

3D

Lightwave3D から 3D PDF 作成手順

PHP

XAMPP for Windows php7.2.9 に ImageMagick インストール

JavaScript

Adobe Brackets 最小構成の拡張機能をjavaScriptで作成

JavaScript

Visual Studio Code 最小構成の拡張機能をJavaScriptで作成

CakePHP3

CakePHP3(CakePHP3.6)でバリデーションが利かない。評価されずに通過する。

Plesk

PleskのCRONがJSTではなくUTCで実行される。service crond restart でも直らない。

Plesk

Plesk PHP-FPMでエラーページを設置する場合、存在しないファイルと存在しないディレクトリの違い

ウェブサーバー

/bin/bash^M: bad interpreter: No such file or directory

CakePHP3

CakePHP3で取得したdateのフォーマットが年2桁。年4桁にデフォルトを変更する

Plesk

Plesk に SSH2 Extension セットアップ php7.2

PHP

XAMPP PHP7.2 でSSH2。 Call to undefined function ssh2_connect()

SVG

SVGをbase64でCSSに埋め込み

ウェブサーバー

ウェブサーバーの指定ディレクトリを丸ごとCRONでローカルに複世代自動アーカイブする

ウェブサーバー

ウェブサーバーのMySQLデータベース複世代自動バックアップ(ダンプ出力)

NextCloud

NextCloudでユーザー作成時に自動設置されるファイルを無くす。または変更する。

ウェブサーバー

NGINXでindex.phpを表示させない。index.phpを省略したい。リダイレクトループを防ぐ。

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

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

■ 便利サイト

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

ファビコン一括生成

ファビコン作成

JavaScriptでファビコン

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

マルチアイコン作成

近似色生成カラークリエイター

Exif情報表示

クライアント領域サイズ表示

ジグソーパズル作成

BOXカバー画像作成

DVDカバー画像作成

QRコード作成 SVG版

QRコード作成

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

VisualStudioカラーコード表

基礎代謝量計算

バイオリズム計算

バイオリズム計算(PWA版)

西暦和暦干支年齢一覧

レターアート

ゴッド凱旋リーチ目チェッカー

ゴッド凱旋リーチ目チェッカー(PWA版)

ハーデス冥王召喚リーチ目チェッカー

ハーデス冥王召喚リーチ目チェッカー(PWA版)

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

レンタルサーバー

3Dグラフィック

プログラミング記録QuickAnswer

ネイティブJavaScriptで書こう!

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

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

エーオーシステム

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

top of page