我想要给svg中的text
文字涂上类似于css中的background-color
的背景色。
我只能找到关于fill
的文档,这个属性只能让文字本身变色。
这种操作是否可能呢?
我想要给svg中的text
文字涂上类似于css中的background-color
的背景色。
我只能找到关于fill
的文档,这个属性只能让文字本身变色。
这种操作是否可能呢?
你可以使用滤镜来生成背景。
<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>
operator="xor"
添加到 feComposite
可以防止文本模糊。@RobertLongson @teran @paulmelnikow @bill - Saeid不,这是不可能的,SVG元素没有background-...
演示属性。
要模拟此效果,您可以在文本属性后面绘制一个带有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);
我使用的解决方案是:
<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>
正在放置一个具有描边和描边宽度属性的重复文本项。描边应该与背景颜色相匹配,描边宽度应该足够大,以创建一个“斑点”,在其上编写实际文本。
这是一种有些取巧的方法,可能存在潜在问题,但对我来说起作用!
可以使用<foreignObject>
标签来代替<text>
标签,它支持具有CSS的XHTML内容。
foreignObject
是 SVG 世界中的一个 hack,正如 @KernelJames 所提到的,并非所有浏览器都完全支持它。 - Maciej Bukowski不可以为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");
结合@dbarton_uk的回答,为避免重复文本,您可以使用paint-order=stroke
样式:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
stroke-linejoin:round
,这是必须的,以避免在W尖角处看到尖峰。由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
的参数x
、y
、width
和height
。默认值提供了一个漂亮的填充(我的意思是,默认的SVG值,如果您没有定义它们)。 - FlorianTfill="red"
会使文本变成红色。 - theonlygustiover
操作符而不是xor
,你只能使用第一个文本元素。 - undefined如果你想在文本元素具有背景时如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>
transform: translate(-10%, -10%)
一样使用,而width和height值可以读取为120%
和120%
。因此,我们使背景增大了20%,并将其偏移了-10%,所以背景现在在文本的每一侧都增大了10%。<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>
这是我最喜欢的技巧(不确定它是否有效)。它引用了一个尚未显示的元素,并且效果非常好。
<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>