【SVG】ポリゴンクジラにSVGを

以前思いつきで作ったポリゴンのクジラを、
SVGデータにしてブログ内に取り込んでみました。

前回の記事はこちら

01. まずは SVG を表示しよう

インライン SVG を取り込みます

<!-- SVG Whale -->
<svg style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <style type="text/css">****</style>
    <symbol id="svgWhale" viewBox="0 0 455.545 375.82">
    <g>
    <polygon ***～***/>
    </g>
    </symbol>
</defs>
</svg>
<!-- /SVG Whale -->

<style>と<polygon>の部分は、長いので割愛しています。

次に <use> を使って SVG を描画します

<!-- SVG Whale v01 -->
<div id="svgWhaleV01">
<svg>
<defs>
    <style type="text/css">
        #svgWhaleV01 {position:relative; width:80%; margin:30px auto;}
        #svgWhaleV01::before {content:''; display:block; padding-top:83%;}
        #svgWhaleV01 svg {position:absolute; top:0px; left:0px; width:100%; height:100%;}
    </style>
</defs>
<use xlink:href="#svgWhale"/>
</svg>
</div>
<!-- /SVG Whale v01 -->

今回はブログのコンテンツブロックの横幅 80% のサイズで表示することにしました。

SVG ポリゴンクジラどーん★

各アンカーポイントを整列して作っていたのではどうしてもポリゴン同士に薄い隙間が開いてしまうため、あれから各ポリゴン面を 0.3px オフセットしました。これによってポリゴン面同士が若干重なるため、薄い隙間は見えなくなります。

次にこの取り込んだポリクジラにホバーアクションをかけてみます。

02. CSS で少し飾ってみよう

とりあえず :hover を設定してみます

<!-- SVG Whale v02 -->
<div id="svgWhaleV02">
<svg>
<defs>
    <style type="text/css">
        #svgWhaleV02 {position:relative; width:80%; margin:30px auto;}
        #svgWhaleV02::before {content:''; display:block; padding-top:83%;}
        #svgWhaleV02 svg {position:absolute; top:0px; left:0px; width:100%; height:100%;}
        #svgWhaleV02 svg polygon {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
        #svgWhaleV02 svg polygon:hover {fill:#ff0000;}
    </style>
</defs>
<use xlink:href="#svgWhale"/>
</svg>
</div>
<!-- /SVG Whale v02 -->

SVG ポリゴンクジラよ、反応せよ！

こんな感じでしょうか？
なんかちょっと楽しいです。

次回はスクリプトを使って各ポリゴンにマウスオーバーアクションを追加してみようと思います。実は軽く jQuery でやってみたのですが、どうやら SVG は jQuery ではいじれないようなので、ちゃんと javascript で書くことにします。

※2016.11.10追記

:hoverでのアクションは FireFox でしか作動していない模様。<use>での SVG 表示はブラウザ間で仕様がかなり違うようなので、<use>内要素へのセレクタでのアクセスは諦めました。毎回インライン SVG を記述する or JavaScript で SVGDOM を作るかしかなさそうです。

SVG はこのサイトを見ながら勉強してます。めっちゃ詳しいです。