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|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|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|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|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|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|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>


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|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>


<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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中文本的背景色EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG中文本的背景色
EN