SVG文本的背景颜色
我想为css中的background-color svg text background-color
我只能findfill文档，这是文本本身的颜色
这甚至有可能吗？
不，这是不可能的，SVG元素没有background-... presentation属性 。
为了模拟这种效果，你可以在fill="green"属性fill="green"或类似的东西（filter）的文本属性后面绘制一个矩形。 使用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);
您可以使用filter来生成背景。
<svg width="100%" height="100%"> <defs> <filter x="0" y="0" width="1" height="1" id="solid"> <feFlood flood-color="yellow"/> <feComposite in="SourceGraphic"/> </filter> </defs> <text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text> </svg>
不，您不能为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");
我用过的解决scheme是：
<svg> <line x1="100" y1="100" x2="500", y2="100" style="stroke:black; stroke-width: 2"/> <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text> <text x="150" y="105" style="fill:black">Hello World!</text> </svg>
正在放置重复的文本项目，包括描边和描边宽度属性。 笔画应该与背景颜色相匹配，笔画宽度应该足够大，以创build一个“splodge”来写实际的文字。
有点破解，有潜在的问题，但适合我！
通过Robert Longson（@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的文本元素中的空格提供的。 这对我有用
这是我最喜欢的黑客（不知道它应该工作）。 它引用了一个尚未显示的元素，并且工作得很好
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet"> <defs> <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground"> <feFlood flood-color="#00ffff"/> </filter> </defs> <!--Draw the text--> <use xlink:href="#mygroup" filter="url(#removebackground)" /> <g id="mygroup"> <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text> <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> </g> </svg>
