在形状填充上应用SVG遮罩

Question

我想根据下面定义的渐变使对象的填充变暗。 但是，当遮罩超过填充量时，它会变亮。 我认为这必须基于关于如何混合颜色的决定。 它使用加色而不是减色。 我是否需要在面膜上应用过滤器？ 我觉得应该在渐变或遮罩定义中都有一个属性，使其以我想要的方式混合颜色。 下面的代码和小提琴链接：

<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

您可以使用具有适当混合模式的简单<rect>替换蒙版。

（在<g>下方）：

<rect x="0" y="0" width="400" height="500" style="stroke:none;
  fill: url(#mygradient); mix-blend-mode: multiply" />

看到这个小提琴

Answer 2

为什么要戴口罩？ 遮罩用于改变透明度，而不是颜色。

您的SVG中有一个未使用的渐变。 如果您调整渐变的颜色，则可以得到想要的效果。

 <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>