SVG 滤镜feImage

<svg width="360" height="220">
    <defs>
        <filter id="f">
            <feImage xlink:href="http://www.oxxostudio.tw/img/articles/201410/20141003_1_demo.jpg"/>
        </filter>
    </defs>
    <rect x="30" y="30" width="150" height="150" filter="url(#f)" />
    <rect x="30" y="30" width="150" height="150" stroke="#00f" fill="none" />
    <rect x="0" y="0" width="360" height="220" stroke="#000" fill="none" stroke-width="2" />
</svg>

image.png

primitiveUnits

• userSpaceOnUse
  如果primitiveUnits属性未指定,那么效果就如同指定值为userSpaceOnUse的效果是一样的
  当<filter>元素使用该值的时候,过滤器中定义的任意长度的值都基于当前用户坐标系统(例如通过filter元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的filter属性引用一个滤镜)元素的元素所在的用户坐标系统

<svg width="360" height="220">
    <defs>
        <filter id="f">
            <feImage xlink:href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585929853539&di=665e1f857db579293bb2edfc05859da5&imgtype=0&src=http%3A%2F%2Fimg32.photophoto.cn%2F20140816%2F0017030559136232_s.jpg"
                     x="0" y="0" width="100" height="100"/>
        </filter>
    </defs>
    <rect x="30" y="30" width="150" height="150" filter="url(#f)" />
    <rect x="30" y="30" width="150" height="150" stroke="#00f" fill="none" />
    <rect x="0" y="0" width="360" height="220" stroke="#000" fill="none" stroke-width="2" />
</svg>

image.png

• objectBoundingBox
  在filter中定义的任意长度值表示引用该filter的元素的包围盒的分数或百分比.
  什么意思呢，如果使用objectBoundingBox，此时width和height的数值就是比例，这里的rect尺寸是150px的，width=1表示150*1 = 150px,如果width=0.5 就是75px

<svg width="360" height="220">
    <defs>
        <filter id="f" primitiveUnits="objectBoundingBox" >
            <feImage xlink:href="http://www.oxxostudio.tw/img/articles/201410/20141003_1_demo.jpg"
                     x="0" y="0" width="1" height="1"/>
        </filter>
    </defs>
    <rect x="30" y="30" width="150" height="150" filter="url(#f)" />
    <rect x="30" y="30" width="150" height="150" stroke="#00f" fill="none" />
    <rect x="0" y="0" width="360" height="220" stroke="#000" fill="none" stroke-width="2" />
</svg>

image.png

<svg width="360" height="220">
  <defs>
      <filter id="f" primitiveUnits="objectBoundingBox" >
          <feImage xlink:href="http://www.oxxostudio.tw/img/articles/201410/20141003_1_demo.jpg"
                   x="0.5" y="0.1" width="1" height="1"/>
      </filter>
  </defs>
  <rect x="30" y="30" width="150" height="150" filter="url(#f)" />
  <rect x="30" y="30" width="150" height="150" stroke="#00f" fill="none" />
  <rect x="0" y="0" width="360" height="220" stroke="#000" fill="none" stroke-width="2" />
</svg>

image.png

参考