SVG中文本的背景色

101

我想像在CSS中text一样给SVG的背景上色background-color

我只能找到有关的文档fill，该文档使文本本身着色

可能吗？

css  svg  background-color 
— 尼克·吉南托（Nick Ginanto）
source
到目前为止，您可以共享您的代码吗？
— gotohales
— gotohales
stackoverflow.com/questions/12260370/…还显示了如何使用过滤器执行此操作。
— ErikDahlström2013年
1
@RobertLongson在第二个问题被问到另一个问题之前将其重复出现似乎是错误的，尤其是当唯一的答案是您的问题时。
— Balthazar
@Aperçu：问题的年龄并不是选择重复目标的主要因素，例如，请参见此处。
— 2016年

Answers:

93

否，这是不可能的，SVG元素没有background-... 表示属性。

为了模拟这种效果，您可以使用以下命令在text属性后面绘制一个矩形 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);
— 斯鲁伊斯
source
8
或在文本上使用svg过滤器（feFlood + feComposite）。看到稍微类似的问题stackoverflow.com/questions/12260370/…。
— ErikDahlström2013年
3
使用getBBox（）的此解决方案虽然效果很好，但在需要执行大量计算时可能会非常慢。使用svg过滤器（feFlood + feComposite）的问题是文本有点锯齿。下面提供了一个简单但棘手的解决方案。
— dbarton_uk
最好使用textElm = document.getElementById（“ the-text”）而不是textElm = ctx.getElementById（“ the-text”）？
— 西蒙·喜
我如何在nodeJS中使用相同的getBBox函数
— Ali
77

您可以使用过滤器生成背景。

<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>
</svg>
展开摘要

— 罗伯特·朗森
source
1
“ SourceGraphic”在这里是什么意思？“ url（#solid）”是否实际上会导致额外的Web访问？
— Ben Slade
7
文字在这里很模糊:(
— teran 2013年
5
可以给背景填充吗？
— vsync
2
从理论上讲，喜欢这种解决方案，但可以确认文本模糊。过滤器似乎无法抗锯齿。
— paulmelnikow
2
添加operator="xor"以feComposite防止文字模糊。@RobertLongson @teran @paulmelnikow @bill
— Saeid Zebardast
20

我使用的解决方案是：

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

正在放置具有笔画和笔触宽度属性的重复文本项。笔划应与背景色匹配，并且笔划宽度应足够大以创建一个“ splodge”，以在上面写上实际的文本。

有点破解，有潜在的问题，但是对我有用！

— dbarton_uk
source
1
我发现此解决方案是最简单的。
— Morgan Wilde
确认这是最简单的解决方案
— 船长
在打印时过滤器溶液非常模糊的地方也可以打印得很好。
— 戴维·亨特
17

不可以，您不能为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");
— 纳塔瓦
source
3
这行不通；它仅更改文本的颜色，而不更改背景颜色。
— David J.
将文本括在div或span中，并对您使用的最后两个中的任何一个应用样式。
— 阿里夫·伯汉
这篇文章解释得好：cambridge-intelligence.com/...
— 交易所
4

罗伯特·朗森（@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” :)填充由带有过滤器的文本元素中的空白提供。对我有用

— 罗曼·贝洛夫（Roman Belov）
source
2

这是我最喜欢的黑客（不确定是否可以正常工作）。它引用了尚未显示的元素，并且效果很好

<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>
展开摘要

— Calimero100582
source
2

您可以将过滤器与文本结合使用。

<!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>
展开摘要

— 武潘
source
1

对于那些想知道如何在文本元素具有罗伯特答案中的背景时将填充应用于文本元素的人，请执行以下操作：

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

在上面的示例中，可以按原样使用过滤器的x和y位置transform: translate(-10%, -10%)，并且可以将宽度和高度值读取为120%和120%。因此，我们将背景扩大了20％，并将背景偏移了-10％，因此背景现在在文本的每一侧都扩大了10％。

— 蒙西卢
source
0

先前的答案依赖于将文本加倍并且缺少足够的空格。

通过使用atop和&nbsp;我可以获得所需的结果。

此示例还包括箭头，这是SVG文本标签的常见用例： 

<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>
— 亨利的猫
source
-1

您可以在文本中添加样式： 

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

在此示例中为白色。在IE中不起作用:)

— 简·皮
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.