SVGの基本的な使い方と動的に色を書き換える方法【今更聞けない!】

21,049 view

こんにちは、keishibukiです。
前回の「脱コピペ!WordPressを使いこなす講座 第一回~Advanced Custom Fields~」から早4ヶ月。久しぶりに更新したいと思います!

さて、今回は前回の続きではありません!
先日、svgを本格的に使った(クリックやホバーなどの動作で画像の一部の色を変えたり、動かしたり)サイトを構築しましたので、こちらSVGの基本的な使い方と動的に色を書き換える方法をご紹介致します!

SVGの4つの表示方法

<img>のsrcでファイルを読み込む

<img src="hoge.svg" alt="hoge">

background-imageプロパティでファイルを読み込む

div {
background-image: url('hoge.svg');
}

htmlにインラインで直接SVGタグを記述する

<div>
<svg ~~>
<!-- 略 -->
</svg>
</div>

object要素のdata属性でファイルを読み込む

<object id="hoge" type="image/svg+xml" data="hoge.svg"></object>

直接書くのは大変なので、基本的にはimg/backgroundでの表示、
jsで操作したい場合はobjectで表示、という風にすればいいと思います。

動的に色を書き換える方法

jsを使ってsvgの色を変えるには上の4番、objectでの表示を行う必要があります。
まずはsvgの中身を確認してみましょう。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 241 105.8" style="enable-background:new 0 0 241 105.8;" xml:space="preserve">
<style type="text/css">
.red{fill:#FF0000;}
.blue{fill:#0000FF;}
</style>
<path id="XMLID_2_" class="red" d="M241,49.8h-3.2H4C4,49.8,98.6,0,170.1,0C241.6,0,241,49.8,241,49.8z"/>
<path id="XMLID_53_" class="blue" d="M237,105.8h-3.2H0c0,0,94.6-49.8,166.1-49.8S237,105.8,237,105.8z"/>
</svg>

今回はこのredとblueの色を逆にしてみたいと思います。

svg要素を取得

まずはsvgを取得します。
svgはiframeなどと同じように別ドキュメントとなりますので、
普通にjQueryでこのような感じで書いても色は変わりません。

<object id="hoge" type="image/svg+xml" data="hoge.svg"></object>
$('#hoge').find('.black').css('background-color', red');

正しくは

var svg = document.getElementById('hoge').contentDocument,
$svg  = $(svg),
$svgRed = $svgBg.find('.red'),
$svgBlue = $svgBg.find('.blue'),

これでsvgの赤い部分と青い部分が取得できました。

色を変更
svgの中身を見ると

.red{fill:#FF0000;}

という謎の記述があります。

実はsvgはこれで色を制御しています。
※ちなみにfillは塗りという意味です。

ということは。。。

$svgRed.css('fill', '#0000FF');
$svgRed.css('fill', '#FF0000');

という記述で色が変わります!
※どうやらChromeではローカルでiframeやsvgなどが上手く取得できないようです。

あとはホバーやクリックなどのイベントと組み合わせればOKです。

以上「SVGの基本的な使い方と動的に色を書き換える方法」でした!

\ SNSでシェア /

WRITER

keishibuki

制作 keishibuki

新潟生まれ、新潟育ちの新潟Boy。
95年生まれのラストゆとり世代。

専門学校に通いながらアルバイトとして働いていたが、
2017年度の春で晴れて正社員にランクアップ。

TAGS