svg - 过滤背景颜色应用于路径

Question

我正在尝试复制我已经在 CSS 中为 SVG 元素的类所做的工作。

fill 属性继承父级的 currentColour，我们说红色作为参数。

然后我在不同的不透明度值下应用一些线性渐变，并对每个渐变应用不同的背景混合模式。

这对 css 类非常有效。

到目前为止，我对 SVG 所做的尝试是这样的：

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">

    <!-- background-image: 
      linear-gradient(-180deg,  rgba(black,0.69) 0%,  rgba(black,0.69) 100%),
      linear-gradient(-180deg,  rgba(black,0.100) 0%,  rgba(black,0.100) 100%),
      linear-gradient(-180deg,  rgba(black,0.49) 0%,  rgba(black,0.49) 100%);
    background-blend-mode: luminosity, lighten, saturation; -->

    <defs>
        <filter id="f1" x="0" y="0" width="100%" height="100%">
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.69" result="lumiFill"/>
            <feBlend in="SourceGraphic" in2="lumiFill" mode="luminosity" result="lumiBlend"/>
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.1" result="lightenFill"/>
            <feBlend in="lumiBlend" in2="lightenFill" mode="lighten" result="lightenBlend"/>
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.49" result="saturationFill"/>
            <feBlend in="lightenBlend" in2="saturationFill" mode="saturation" result="saturationBlend"/>
        </filter>
    </defs>
    <rect width="300" height="100" filter="url(#f1)" />
</svg>

这似乎确实改变了颜色，但我相信它会在第一次洪水时停止，因为我可以在它之后拉出另外两个，它似乎工作正常。

谁能建议我做错了什么？

Answer 1

这是按书面规定工作的。如果您调整泛洪尺寸以使其偏移，您可以看到每个图元都在执行您指定的操作。

你想达到什么效果？ （完整的代码示例——不仅仅是一个 CSS 片段）

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">

    <!-- background-image: 
      linear-gradient(-180deg,  rgba(black,0.69) 0%,  rgba(black,0.69) 100%),
      linear-gradient(-180deg,  rgba(black,0.100) 0%,  rgba(black,0.100) 100%),
      linear-gradient(-180deg,  rgba(black,0.49) 0%,  rgba(black,0.49) 100%);
    background-blend-mode: luminosity, lighten, saturation; -->

    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" primitiveUnits="objectBoundingBox">
            <feFlood x="0%" y="0%" width="60%" height="100%" flood-color="black" flood-opacity="0.69" result="lumiFill"/>
            <feBlend in="SourceGraphic" in2="lumiFill" mode="luminosity" result="lumiBlend"/>
            <feFlood x="40%" y="0%" width="60%" height="100%" flood-color="black" flood-opacity="0.1" result="lightenFill"/>
            <feBlend in="lumiBlend" in2="lightenFill" mode="lighten" result="lightenBlend"/>
            <feFlood x="0%" y="0%" width="100%" height="50%" flood-color="black" flood-opacity="0.49" result="saturationFill"/>
            <feBlend in="lightenBlend" in2="saturationFill" mode="saturation" result="saturationBlend"/>
        </filter>
    </defs>
    <rect x="50px" y="50px" width="300px" height="100px" fill="red" filter="url(#f1)" />
</svg>