blocks|key|354440|text|不这是不可能的，SVG元素没有background-...+presentation+attributes。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|354441|为了模拟这种效果，你可以在文本属性后面画一个矩形，用fill="green"或者类似的东西(滤镜)。使用JavaScript，您可以执行以下操作：|354442|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);|code-block|syntax|javascript|354443|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/SVG/Attribute#Presentation^0|F|E|U|N|0|0|Q|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>No this is not possible, SVG elements do not have <code>background-...</code> <a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#Presentation" rel="noreferrer">presentation attributes</a>. </p>

<p>To simulate this effect you could draw a rectangle behind the text attribute with <code>fill="green"</code> or something similar (filters). Using JavaScript you could do the following: </p>

<pre><code>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);
</code></pre>


blocks|key|354535|text|你可以使用滤镜来生成背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354536|​|354537|<svg+width="100%25"+height="100%25">
++<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>|code-block|syntax|javascript|354538|354539|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You could use a filter to generate the background.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="100%" height="100%"&gt;
  &lt;defs&gt;
    &lt;filter x="0" y="0" width="1" height="1" id="solid"&gt;
      &lt;feFlood flood-color="yellow" result="bg" /&gt;
      &lt;feMerge&gt;
        &lt;feMergeNode in="bg"/&gt;
        &lt;feMergeNode in="SourceGraphic"/&gt;
      &lt;/feMerge&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;text filter="url(#solid)" x="20" y="50" font-size="50"&gt;solid background&lt;/text&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|354570|text|我使用的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354571|​|354572|<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>|code-block|syntax|javascript|354573|354574|正在放置具有笔划和笔划宽度属性的重复文本项目。笔划应该与背景颜色相匹配，笔划宽度应该足够大，以创建一个“斑点”，在上面写实际的文本。|354575|一点小技巧，有潜在的问题，但对我来说是有效的！|354576|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>The solution I have used is:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
  &lt;line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/&gt;    
  &lt;text x="150" y="105" style="stroke:white; stroke-width:0.6em"&gt;Hello World!&lt;/text&gt;
  &lt;text x="150" y="105" style="fill:black"&gt;Hello World!&lt;/text&gt;  
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a &quot;splodge&quot; on which to write the actual text.</p>
<p>A bit of a hack and there are potential issues, but works for me!</p>


blocks|key|136707|text|不能，您不能向SVG元素添加背景颜色。您可以使用d3以编程方式完成此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|136708|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+%2B+(padding*2))
++++.attr("height",+bbox.height+%2B+(padding*2))
++++.style("fill",+"red");|code-block|syntax|javascript|136709|entityMap|0|LINK|mutability|MUTABLE|url|http://d3js.org/^0|O|2|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>No, you can not add background color to SVG elements. You can do it programmatically with <a href="http://d3js.org/">d3</a>.</p>

<pre><code>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");
</code></pre>


blocks|key|354668|text|可以使用标记，而不是使用XHTML标记，这允许使用带有<text>的XHTML内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|354669|entityMap^0|R|6|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Instead of using a <code>&lt;text&gt;</code> tag, the  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject" rel="noreferrer"><code>&lt;foreignObject&gt;</code></a> tag can be used, which allows for XHTML content with CSS.</p>


blocks|key|136821|text|由Robert+Longson+(@RobertLongson)提供的经过修改的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136822|<svg+width="100%25"+height="100%25">
++<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>|code-block|syntax|javascript|136823|我们没有模糊和沉重的"getBBox“:)填充是由带有过滤器的文本元素中的空格提供的。这对我很管用|136824|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Answer by Robert Longson (@RobertLongson) with modifications: </p>

<pre><code>&lt;svg width="100%" height="100%"&gt;
  &lt;defs&gt;
    &lt;filter x="0" y="0" width="1" height="1" id="solid"&gt;
      &lt;feFlood flood-color="yellow"/&gt;
      &lt;feComposite in="SourceGraphic" operator="xor"/&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;text filter="url(#solid)" x="20" y="50" font-size="50"&gt; solid background &lt;/text&gt;
  &lt;text x="20" y="50" font-size="50"&gt;solid background&lt;/text&gt;
&lt;/svg&gt;
</code></pre>

<p>and we have no bluring and no heavy "getBBox" :) 
Padding is provided by white spaces in text-element with filter.
It's worked for me</p>


blocks|key|354722|text|您可以将过滤器与文本组合在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354723|​|354724|<!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>
	++
++++<rect+fill="red"+x="150"+y="20"+width="100"+height="50"+/>
++++<circle+cx="50"++cy="50"+r="50"+fill="blue"/>
++++++
++++++
++++++<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>+|code-block|syntax|javascript|354725|354726|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can combine filter with the text.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8 /&gt;
    &lt;title&gt;SVG colored patterns via mask&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;defs&gt;
        &lt;filter x="0" y="0" width="1" height="1" id="bg-text"&gt;
          &lt;feFlood flood-color="white"/&gt;
          &lt;feComposite in="SourceGraphic" operator="xor" /&gt;
        &lt;/filter&gt;
      &lt;/defs&gt;
	  &lt;!-- something has already existed --&gt;
    &lt;rect fill="red" x="150" y="20" width="100" height="50" /&gt;
    &lt;circle cx="50"  cy="50" r="50" fill="blue"/&gt;
      
      &lt;!-- Text render here --&gt;
      &lt;text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30"&gt;text with color&lt;/text&gt;
      &lt;text fill="black" x="20" y="50" font-size="30"&gt;text with color&lt;/text&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
&lt;/html&gt; </code></pre>
</div>
</div>
</p>


blocks|key|136842|text|这是我最喜欢的方法(不确定它是否可以工作)。它引用了一个尚未显示元素，而且它工作得很好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136843|​|136844|<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>

+++++
++++<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>|code-block|syntax|javascript|136845|136846|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
    &lt;defs&gt;
        &lt;filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground"&gt;
            &lt;feFlood flood-color="#00ffff"/&gt;
        &lt;/filter&gt;
    &lt;/defs&gt;

    &lt;!--Draw the text--&gt; 
    &lt;use xlink:href="#mygroup" filter="url(#removebackground)" /&gt;
    &lt;g id="mygroup"&gt;
        &lt;text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;"&gt;custom text with background&lt;/text&gt;  
        &lt;line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/&gt; 
        &lt;line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/&gt; 
    &lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|136951|text|以前的答案依赖于双倍的文本，并且缺乏足够的空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136952|通过使用atop和&nbsp;，我能够得到我想要的结果。|offset|length|style|CODE|136953|此示例还包括箭头，这是SVG文本标签的常见用例：|136954|<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">&nbsp;130+cm&nbsp;</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">&nbsp;60+cm&nbsp;</text>
++++</g>
</g>
</svg>|code-block|syntax|javascript|136955|entityMap^0|0|4|4|9|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>The previous answers relied on doubling up text and lacked sufficient whitespace.</p>

<p>By using <code>atop</code> and <code>&amp;nbsp;</code> I was able to get the results I wanted.</p>

<p>This example also includes arrows, a common use case for SVG text labels: </p>

<pre><code>&lt;svg viewBox="-105 -40 210 234"&gt;
&lt;title&gt;Size Guide&lt;/title&gt;
&lt;defs&gt;
    &lt;filter x="0" y="0" width="1" height="1" id="solid"&gt;
        &lt;feFlood flood-color="white"&gt;&lt;/feFlood&gt;
        &lt;feComposite in="SourceGraphic" operator="atop"&gt;&lt;/feComposite&gt;
    &lt;/filter&gt;
    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"&gt;
        &lt;path d="M 0 0 L 10 5 L 0 10 z"&gt;&lt;/path&gt;
    &lt;/marker&gt;
&lt;/defs&gt;
&lt;g id="garment"&gt;
    &lt;path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"&gt;&lt;/path&gt;
    &lt;path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"&gt;&lt;/path&gt;
    &lt;use id="left-body" href="#right-body" transform="scale(-1,1)"&gt;&lt;/use&gt;
    &lt;use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"&gt;&lt;/use&gt;
    &lt;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"&gt;&lt;/path&gt;
    &lt;use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"&gt;&lt;/use&gt;
    &lt;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"&gt;&lt;/path&gt;
    &lt;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"&gt;&lt;/path&gt;
    &lt;line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"&gt;&lt;/line&gt;
    &lt;use id="collar-right" href="#collar-left" transform="scale(-1,1)"&gt;&lt;/use&gt;
&lt;/g&gt;
&lt;g id="dimension-labels"&gt;
    &lt;g id="dimension-sleeve-length"&gt;
        &lt;line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
        &lt;text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"&gt; 120 cm&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="dimension-length"&gt;
        &lt;line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
        &lt;text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"&gt; 154 cm&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="dimension-sleeve-to-sleeve"&gt;
        &lt;line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
        &lt;text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"&gt;&amp;nbsp;130 cm&amp;nbsp;&lt;/text&gt;
    &lt;/g&gt;
    &lt;g title="Back Width" id="dimension-back-width"&gt;
        &lt;line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
        &lt;text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"&gt;&amp;nbsp;60 cm&amp;nbsp;&lt;/text&gt;
    &lt;/g&gt;
&lt;/g&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|354811|text|进一步使用@dbarton_uk+answer，为了避免重复文本，您可以使用paint-order=stroke样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|354812|​|354813|<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>|code-block|syntax|javascript|354814|354815|注意stroke-linejoin:round，它是为了避免看到W尖角的尖峰而需要的。|354816|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/41902064/2937955^0|12|I|H|6|0|0|0|0|0|2|L|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Going further with @dbarton_uk <a href="https://stackoverflow.com/a/41902064/2937955">answer</a>, to avoid duplicating text you can use <code>paint-order=stroke</code> style:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
  &lt;line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/&gt;    
  &lt;text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round"&gt;Hello World!&lt;/text&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>
<p>Note the <code>stroke-linejoin:round</code> which is needed to avoid seeing spikes for the W sharp angle.</p>


blocks|key|354689|text|您可以为文本添加样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354690|++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;"|code-block|syntax|javascript|354691|在本例中为White。在IE中不起作用:)|354692|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can add style to your text: </p>

<pre><code>  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;"
</code></pre>

<p>White, in this example.
Does not work in IE :)</p>


<p>I want to color the background of svg <code>text</code> similar to <code>background-color</code> in css</p>

<p>I was only able to find documentation on <code>fill</code>, which colors the text itself</p>

<p>Is it even possible?</p>


Background color of text in SVG

我想给svg text的背景着色，类似于css中的background-color。我只能找到关于fill的文档，它为文本本身着色这有可能吗？

问SVG中文本的背景色
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中文本的背景色EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中文本的背景色
EN