SVGでテクスチャを使う

svg-texture.png

やり方が2通りあります

  • <pattern>を使う方法
  • <filter>のfeTileを使う方法
<pattern id="P" width="150" height="147"  patternUnits="userSpaceOnUse">
        <image width="150" height="147" xlink:href="Persian.png"/>
    </pattern>

patternタグ

patternUnits

  • userSpaceOnUse….模様が繰り返しになります

filterタグのfeTile

 <filter id="feTile" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
            <feImage x="0" y="0" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img.png" result="img"/>
            <feTile x="0" y="0" width="200" height="200" in="img"/>
        </filter>

画像の形でくり抜く

feCompositeタグのoperatorでくり抜くことができる。

サポートサイト Wikidot.com