Question

我尝试使用text过滤器将背景颜色仅应用于feFlood元素中的一个单词。

发生的事情是，洪水正在填充所有父元素，甚至隐藏了一些文本。

DEFS

<filter x="0" y="0" width="1" height="1" id="colorMe">
    <feFlood flood-color="red"/>
    <feComposite in="SourceGraphic"/>
</filter>

风格

.colorMe {
        filter: url(#colorMe);
        fill: #ccc;
    }
text{
    fill: #fff;
    font: 40px Verdana, Helvetica, Arial, sans-serif;
}

由于我没有包含x,y,width,height洪水，我认为它只会填充tspan - 因为类在动态添加{{1各种大小的元素

有没有办法只为一个单词添加背景颜色？

下面的代码段和here's a fiddle too

所有代码

＆＃13;

tspan

＆＃13;

Answer 1

似乎浏览器尚未同意过滤器是否在<tspan>上有效。

规范说过滤器适用于“容器元素（除了掩码）和图形元素”。从技术上讲，<tspan>不属于这两类。

Firefox开发人员已经确定过滤器在tspans上无效（请参阅this bugzilla bug）。

您的测试在IE中运行良好。

似乎Chrome认为它应该可行 - 它现在只是被窃听。我代表您提交了bug report in Chrome。