it-swarm.com.de

Hintergrundfarbe des Textes in SVG

Ich möchte den Hintergrund von svg text ähnlich wie background-color in css ausmalen

Ich konnte nur Dokumentation zu fill finden, die den Text selbst färbt

Ist es überhaupt möglich?

73
Nick Ginanto

Nein, das ist nicht möglich, SVG-Elemente haben keine background-...Präsentationsattribute

Um diesen Effekt zu simulieren, können Sie mit fill="green" oder etwas ähnlichem (Filter) ein Rechteck hinter dem Textattribut zeichnen. Mit JavaScript können Sie Folgendes tun: 

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);
72
Roger

Sie können einen Filter verwenden, um den Hintergrund zu generieren.

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

61
Robert Longson

Nein, Sie können den SVG-Elementen keine Hintergrundfarbe hinzufügen. Mit d3 ist dies programmgesteuert möglich.

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");
14
nnattawat

Die Lösung, die ich verwendet habe, ist:

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

Es wird ein doppelter Textelement mit den Attributen "Strich" und "Strichbreite" platziert. Der Strich sollte mit der Hintergrundfarbe übereinstimmen und die Strichbreite sollte gerade groß genug sein, um einen "Splodge" zu erzeugen, auf dem der eigentliche Text geschrieben werden soll.

Ein bisschen hack und es gibt potentielle Probleme, aber es funktioniert für mich!

9
dbarton_uk

Antwort von Robert Longson (@RobertLongson) mit Modifikationen: 

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

und wir haben keine Weichzeichnung und keine schweren "getBBox" :) Die Auffüllung wird durch Leerzeichen im Textelement mit Filter ..__ bereitgestellt

3
Roman Belov

Anstelle eines <text>-Tags kann auch das <foreignObject> - Tag verwendet werden, das XHTML-Inhalte mit CSS ermöglicht.

1
Chris G

dies ist mein Lieblings-Hack (nicht sicher, ob es funktionieren sollte). Es verweist auf ein Element, das noch nicht angezeigt wird, und es funktioniert ziemlich gut

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

Sie können Filter mit dem Text kombinieren.

<!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> 
0
Vu Phan

Sie können Ihrem Text einen Stil hinzufügen: 

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

Weiß in diesem Beispiel . Funktioniert nicht in IE :)

0
Jan Pi