WEB制作(html・css(スタイルシート))に関する各種メモ書き

<img>タグで埋め込んだSVGファイルの色変更をする JavaScript

ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、<img>タグでSVGファイルを読み込むと色変更がCSSでできません。 (<SVG>タグとソースを直接貼り付ける必要がある)

そこで desvg.js を使用します。

● deSVG

http://benhowdle.im/deSVG/

imgタグで埋め込んだ外部SVGファイルの色変更が出来るようになります。

<script src="path/to/desvg.js"></script>
<script>
$(function(){
  deSVG('.my_svg', true);
});
</script>
<img class="my_svg" src="xxxxx.svg" width="26">
.my_svg path{
    color: #fff;
    fill: currentColor;
}

便利です!


No.1025
04/24 01:40

edit