在形状填充上应用SVG遮罩

Question

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>

https://jsfiddle.net/6q3x8x5u/

Answer 1

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

Answer 2

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>