Question

使用<feImage xlink:href=""/>包含将要像photoshop multiply滤镜一样使用的图像时，我发现如果包含svg，则边缘会模糊，但是使用png时，边缘会变得清晰

采用以下代码：

<svg viewBox="0 0 540 610" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="myFilter_1">
      <feImage xlink:href="./shape.png" x="0" y="0" width="470" height="470"/>
      <feBlend in="SourceGraphic" in2="BackgroundImage" mode="multiply"/>
    </filter>
    <filter id="myFilter_2">
      <feImage xlink:href="./shape.svg" x="0" y="0" width="470" height="470"/>
      <feBlend in="SourceGraphic" in2="BackgroundImage" mode="multiply"/>
    </filter>
  </defs>
  <image style="filter:url(#myFilter_1);" x="0" y="0" width="540" height="610" xlink:href="./myimage.png"/>
  <image style="filter:url(#myFilter_2);" x="0" y="0" width="540" height="610" xlink:href="./myimage.png"/>
</svg>

#myFilter_2与#myFilter_1相比模糊

我的shape.svg是一个旋转45度的矩形。
我都尝试过
<polygon id="pink-triangle" points="270,0 540,270 270,540 0,270" fill="#db0962"/>
和
<g id="pink-triangle2" transform="rotate(45 270 270)"> <rect x="80" y="80" width="380" height="380" fill="#db0962"/> </g>

这是为什么？我是否缺少某些属性？

feImage xlink：href svg来源与png相比模糊

0 个答案: