I want to darken the fill of objects according to the defined gradient below. However, when the mask goes over the fill, it lightens it instead. I am assuming this has to be based on the decision on how to blend the colors. Its using additive colors rather than subtractive. Do I need to apply a filter on top of the mask? I feel like there should be an attribute in either the gradient or mask definitions to make it blend the colors the way I want. Code and fiddle link below:
<svg width="400px" height="500px">
<defs>
<linearGradient id="mygradient" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="black"/>
<stop offset="0.5" stop-color="white"/>
<stop offset="1" stop-color="black"/>
</linearGradient>
<mask id="mask1" x="0" y="0" width="400" height="500" MaskUnits="userSpaceOnUse" color-interpolation="sRGB">
<rect x="0" y="0" width="400" height="500"
style="stroke:none; fill: url(#mygradient)"/>
</mask>
</defs>
<g fill="red" mask= "url(#mask1)" stroke="black" stroke-width="4"
feblend="Multiply">
<rect x="5" y="5" width="390" height="90"/>
<rect x="5" y="105" width="390" height="90"/>
<rect x="5" y="205" width="390" height="90"/>
<rect x="5" y="305" width="390" height="90"/>
<rect x="5" y="405" width="390" height="90"/>
</g>
</svg>
You can replace the mask with a simple <rect>
with the proper blend mode.
(Below the <g>
):
<rect x="0" y="0" width="400" height="500" style="stroke:none;
fill: url(#mygradient); mix-blend-mode: multiply" />
See this fiddle
Why the mask? Masks are used to vary the transparency, not the colour.
You have a gradient in your SVG that you are not using. If you adjust the colours of the gradient, you can get what it sounds like you want.
<svg width="400px" height="500px"> <defs> <linearGradient id="mygradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" stop-color="black"/> <stop offset="0.5" stop-color="red"/> <stop offset="1" stop-color="black"/> </linearGradient> </defs> <g fill="url(#mygradient)" stroke="black" stroke-width="4" feblend="Multiply"> <rect x="5" y="5" width="390" height="90"/> <rect x="5" y="105" width="390" height="90"/> <rect x="5" y="205" width="390" height="90"/> <rect x="5" y="305" width="390" height="90"/> <rect x="5" y="405" width="390" height="90"/> </g> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.