web-dev-qa-db-ja.com

SVGのテキストの背景色

Cssのbackground-colorに似たsvg textの背景に色を付けたい

テキスト自体を色付けするfillのドキュメントのみを見つけることができました

それも可能ですか？

csssvgbackground-color
83
Nick Ginanto

いいえ、これは不可能です。SVG要素にはbackground-...プレゼンテーション属性 がありません。

この効果をシミュレートするには、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);
80
Roger

フィルタを使用して背景を生成できます。

<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>
66
Robert Longson

いいえ、背景色をSVG要素に追加することはできません。 d を使用してプログラムで実行できます。

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

私が使用したソリューションは次のとおりです。

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

重複したテキストアイテムが配置され、ストロークとストローク幅の属性が設定されています。ストロークは背景色と一致する必要があり、ストローク幅は実際のテキストを書き込むための「スプロッジ」を作成するのに十分な大きさでなければなりません。

ちょっとしたハックと潜在的な問題がありますが、私には役立ちます！

15
dbarton_uk

ロバート・ロングソン（@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」はありません:)パディングは、フィルターを使用したテキスト要素内の空白によって提供されます。それは私のために働いた

4
Roman Belov

<text>タグを使用する代わりに、 <foreignObject> タグを使用できます。これにより、CSSを使用したXHTMLコンテンツが可能になります。

1
Chris G

テキストとフィルターを組み合わせることができます。

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

これは私のお気に入りのハックです（うまくいくかどうかはわかりません）。まだ表示されていない要素を参照し、かなりうまく機能します

<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

テキストにスタイルを追加できます。

  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では機能しません:)

0
Jan Pi