将 feFlood 过滤器应用于 <tspan> 未按预期工作答案

【问题标题】：Applying feFlood filter to <tspan> not working as expected将 feFlood 过滤器应用于 <tspan> 未按预期工作
【发布时间】：2016-04-14 02:07:25
【问题描述】：

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

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

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 - 很难包含这些，因为该类是动态添加到各种大小的 tspan 元素上的

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

下面的代码sn-p和here's a fiddle too

所有代码

<?xml version="1.0"?>
<svg width="450" height="40" viewBox="0 0 450 40"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
	  <filter x="0" y="0" width="1" height="1" id="colorMe">
        <feFlood flood-color="red"/>
        <feComposite in="SourceGraphic"/>
      </filter>
	</defs>
  <style>
  .colorMe {
		filter: url(#colorMe);
		fill: #ccc;
	}
text{
    fill: #fff;
    font: 40px Verdana, Helvetica, Arial, sans-serif;
}
	</style>
    <text x="15" y="30">You are 
    	<tspan class="colorMe">not</tspan> 
    	me
    </text>
</svg>

【问题讨论】：

filters 即使在 2016 年也对 tspan 不友好，需要两个 text 元素，但是根据经验，有时彩色的 text 看起来会稍微错位，具体取决于浏览器和字体。跨度>
我了解到<tspan>s 基本上是二等公民，我尽可能避免他们。即使在 2022 年，它们上面的 transform、filters 等内容在某些浏览器中也会出现问题。如果您遇到交叉兼容性问题并且您正在使用 tspan，那可能就是问题所在。

标签： css svg

【解决方案1】：

似乎浏览器尚未就过滤器在<tspan> 上是否有效达成一致。

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

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

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

Chrome 似乎认为它应该可以工作——它目前只是被窃听了。我已经代表您提交了bug report in Chrome。

【讨论】：