Kolor tła tekstu w SVG

Chcę pokolorować tło svg text podobnie jak background-color w css

Udało mi się znaleźć tylko dokumentację fill, która koloruje sam tekst

Czy to w ogóle możliwe?
Author: Nick Ginanto, 2013-03-19
Source

8 answers

Nie jest to możliwe, elementy SVG nie mają background-... atrybuty prezentacji .

Aby zasymulować ten efekt można narysować prostokąt za atrybutem tekstowym za pomocą fill="green" lub czegoś podobnego (filtry). Przy użyciu JavaScript można wykonać następujące czynności: 

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);
 67
Author: Roger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-14 16:20:42

Możesz użyć filtra do wygenerowania tła.

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
 53
Author: Robert Longson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-23 21:03:37

Nie, Nie można dodawać koloru tła do elementów SVG. Możesz to zrobić programowo za pomocą 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");
 12
Author: nnattawat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-24 04:48:08

Zastosowane przeze mnie rozwiązanie to: 

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

Jest umieszczany zduplikowany element tekstowy z atrybutami obrys i obrys-szerokość. Obrys powinien pasować do koloru tła, a szerokość obrysu powinna być wystarczająco duża, aby utworzyć "splodge", na którym można zapisać rzeczywisty tekst.

Trochę hack i są potencjalne problemy, ale działa dla mnie!

 7
Author: dbarton_uk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-27 19:58:15

ODPOWIEDŹ Roberta Longsona (@RobertLongson) z modyfikacjami: 

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

I nie mamy rozmycia ani ciężkiego " getbboxa" :) Dopełnieniem są białe spacje w elemencie tekstowym z filtrem. It ' s worked for me

 3
Author: Roman Belov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-14 10:24:47

To mój ulubiony hack (Nie wiem, czy powinien działać). Odnosi się do elementu, który nie jest jeszcze wyświetlany i działa całkiem dobrze 

<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>
 1
Author: Calimero100582,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 20:10:17

Zamiast używać znacznika <text>,<foreignObject> można użyć tagu, który pozwala na zawartość XHTML z CSS.

 0
Author: Chris G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-10 18:58:01

Możesz dodać styl do tekstu: 

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

Biały, w tym przykładzie. Nie działa w IE:)

 0
Author: Jan Pi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-01 18:34:15