SVG梯度或滤波器

Question

我试图在此屏幕截图中重现效果：

我是在HTML + CSS中创建的，但现在想在SVG + CSS中创建它。

当前的HTML代码如下所示：

<div class="key mag " style="left:614px;top:182px;width:68px;height:68px;">
    <div class="caphgh">I</div>
    <div class="caprgt"></div>
    <div class="keyopt">Inventory</div>
    <div class="keyshf"></div>
    <div class="keyctl"></div>
    <div class="keyalt"></div>
    <div class="keyagr"></div>
    <div class="keyxtr"></div>
</div>

当前的样式表代码如下所示：

.mag
{
    background:#E4A0DB; /* CIE-L*ch ( 74, 40,330) */
    background-image:-webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-image:linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
    background-size:72px 72px;
}

另外，我事先并不知道基色会是什么。它可能是品红色，红色或其他几种颜色之一。

我不确定如何在SVG中执行此操作，并希望得到一些帮助。谢谢。

[编辑]

我刚尝试使用自定义代码为PHP中的每个矩形创建一个新的蒙版。这与在defs中保留单个掩码并重复使用它相反。

如果您为每个面具指定不同的ID，则可在Chrome和IE中使用。但这意味着我无法使用mask:url(#Mask); CSS属性，因此无法使用＆＃34;纯粹的＆＃34; CSS解决方案。

[编辑]

根据Paul的建议，我创建了一个这样的矩形：

<svg fill="#ff0000">
    <rect x="0.5" y="0.5" rx="4" ry="4" width="50" height="50" fill="url(#grad_3)"/>
</svg>

我还在defs中设置了线性渐变。

<linearGradient id="grad_3" x1="0" x2="0" y1="0" y2="1">
    <stop id="fade-stop-1" offset="0.0" stop-opacity="1.0" />
    <stop id="fade-stop-2" offset="0.5" stop-opacity="1.0" />
    <stop id="fade-stop-3" offset="0.5" stop-opacity="1.0" />
    <stop id="fade-stop-4" offset="1.0" stop-opacity="1.0" />
</linearGradient>

还有一些CSS：

#fade-stop-1 {stop-color: white;}
#fade-stop-2 {stop-color: white;}
#fade-stop-3 {stop-color: currentColor;}
#fade-stop-4 {stop-color: currentColor;}

然而，结果是一个半白色和半黑色的矩形，而不是半白和半红。我的错是什么？

[编辑]

我认为我的错误是SVG标记应该使用color="#ff0000"而不是fill="#ff0000"。我还不确定，因为我还没有测试过它。