SVG中文本的背景颜色
我想为 svg text 的背景着色，类似于 css 中的 background-color
我只能在 fill 上找到文档，它为文本本身着色
甚至可能吗？
不，这是不可能的，SVG 元素没有 background-... presentation attributes。
为了模拟这种效果，您可以使用 fill="green" 或类似的东西（过滤器）在文本属性后面绘制一个矩形。使用 JavaScript，您可以执行以下操作：
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);
您可以使用过滤器来生成背景。
operator="xor" 添加到 feComposite 以防止文本模糊。 @RobertLongson @teran @paulmelnikow @bill
我使用的解决方案是：
正在放置具有笔画和笔画宽度属性的重复文本项。笔画应该与背景颜色相匹配，并且笔画宽度应该足够大，以创建一个“splodge”，在上面写下实际的文本。
有点破解，有潜在的问题，但对我有用！
除了使用 <text> 标记，可以使用 <foreignObject> 标记，它允许使用 CSS 的 XHTML 内容。
不，您不能为 SVG 元素添加背景颜色。您可以使用 d3 以编程方式执行此操作。
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");
罗伯特朗森（@RobertLongson）的回答并进行了修改：
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
而且我们没有模糊，也没有沉重的“getBBox” :) 填充是由带有过滤器的文本元素中的空格提供的。它对我有用
filter 的参数 x、y、width 和 height。默认值提供了一个很好的填充（我的意思是，不是您的答案的值，而是默认的 SVG 值，如果您没有定义它们）。
"xor" 使文本显示为透明而不是选择的颜色（如果我们排除了带有 alpha 的泛色的更复杂情况）。您不想改用运算符 "over" 吗？
您可以将过滤器与文本结合使用。
这是我最喜欢的 hack（不确定它是否可以工作）。它引用了一个尚未显示的元素，并且效果很好
先前的答案依赖于将文本加倍并且缺少足够的空格。
通过使用 atop 和 ，我能够得到我想要的结果。
此示例还包括箭头，这是 SVG 文本标签的常见用例：
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>
而不是   在许多浏览器上会导致问题，因为它不能作为 SVG 进行验证。此外，您可能希望将 xmlns="http://www.w3.org/2000/svg" 作为属性添加到 svg 标记，以确保浏览器正确解释这一点（例如，这在 Firefox 上不起作用）。
对于那些想知道如何在文本元素具有 Robert's answer 中的背景时对其应用填充的人，请执行以下操作：
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
在上面的示例中，过滤器的 x 和 y 位置可以像 transform: translate(-10%, -10%) 那样使用，width 和 height > 值可以读取为 120% 和 120%。所以我们将背景扩大了 20%，并将其抵消了 -10%，所以背景现在在文本的每一侧都扩大了 10%。
进一步使用@dbarton_uk answer，为避免重复文本，您可以使用 paint-order=stroke 样式：
请注意避免看到 W 锐角尖峰所需的 stroke-linejoin:round。
您可以为文本添加样式：
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
白色，在这个例子中。在 IE 中不起作用 :)
关注公众号
不定期副业成功案例分享
