开发者

SVG feBlend in Pattern?

开发者 https://www.devze.com 2023-02-07 04:21 出处:网络
I would like to create a pattern by loading an image and then applying a multiply color filter on it.However I think I am having trouble understanding the in and in2 properties because it is not worki

I would like to create a pattern by loading an image and then applying a multiply color filter on it. However I think I am having trouble understanding the in and in2 properties because it is not working.

What I am trying is to create the <img> and set fill="green" and then use in="SourceGraphic" in2="FillPaint". But I see an all white canvas in both firefox and chromium. Anyone know why this isn't working? Does blend work with in*="FillPaint"? I also tried just using separate rectangle and image and blending the two with in2="BackgroundImage" but that didn't work either. Maybe because the "background" is not what I think it is when I'm inside the pattern?

Here's my code:

<filter开发者_高级运维 id="multiply" primitiveUnits="objectBoundingBox">
<feBlend in="SourceGraphic" in2="FillPaint" mode="multiply"/>
</filter>

<pattern id="pattern" x="0" y="0" width="32" height="32"  viewBox="0 0 
   32 32" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="32" height="32" fill="green" xlink:href=
  "dirt.png" filter="url(#multiply)"/>
</pattern>

<rect x="0" y="0" width="64" height="64" fill="url(#pattern)"/>


Fillpaint as a filter input is not supported in most current browsers. That's why it's not working.

0

精彩评论

暂无评论...
验证码 换一张
取 消