SVG画像にリンクを貼るには
せっかくSVG形式で書き出した綺麗なベクター画像。そのSVG画像にリンクを貼るにはどうすればいいのでしょうか?
|
1 |
<a href="http://www.yahoo.co.jp"><object data="./logo.svg" type="image/svg+xml" width="100" height="100"><embed src="./logo.svg" type="image/svg+xml" width="100" height="100"></embed></object></a> |
..って感じで書ければいいのですが、そううまくはいきません。
どうやらSVGファイル内にリンク先を記述する必要があるようです。
例えばIllustratorで書き出したSVGをテキストエディタで開くとこんな感じになっています。
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg"> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]> <svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="100" height="100" viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100" xml:space="preserve"> <circle fill="#C0272D" cx="50" cy="50" r="50"/> </svg> |
これを変更します。
xmlns=..と、xmlns:xlink=..の部分を変更しましょう。
そして、<a xlink:href=..にリンクしたいアドレスを追加します。</a>で閉じるのも忘れずに。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg"> <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100" xml:space="preserve"> <a xlink:href="https://wtpmj.com" target="_top"> <circle fill="#C0272D" cx="50" cy="50" r="50"/> </a> </svg> |
これでSVG画像にリンクが貼りつけられました。クリックされると指定先に飛ばせます。
Enjoy!
スポンサーリンク
スポンサーリンク
最近のコメント