我想给svg text
的背景着色,类似于css中的background-color
。
我只能找到关于fill
的文档,它为文本本身着色
这有可能吗?
发布于 2013-06-01 21:14:52
不这是不可能的,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);
发布于 2015-06-24 05:03:37
你可以使用滤镜来生成背景。
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
发布于 2017-01-28 03:58:16
我使用的解决方案是:
<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>
正在放置具有笔划和笔划宽度属性的重复文本项目。笔划应该与背景颜色相匹配,笔划宽度应该足够大,以创建一个“斑点”,在上面写实际的文本。
一点小技巧,有潜在的问题,但对我来说是有效的!
https://stackoverflow.com/questions/15500894
复制相似问题