SVG feBlend in Pattern?
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.
精彩评论