SVG：rect内のテキスト

180

SVG 内にテキストを表示したいrect。出来ますか？

私は試した

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

しかし、それは機能しません。

text svg rect

— Jakub M.
ソース

5

svgで描画された長方形の間

— ジョナス

240

これは不可能です。rect要素内にテキストを表示する場合は、両方をグループに入れて、rect要素の後にテキスト要素を配置する必要があります（上部に表示されます）。

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>

スニペットを展開

— キーツ
ソース

20

長方形の高さと幅を手動で設定する必要がない方法はありますか？

— ジョージマウアー

状況と「手動で」の意味によって異なります。必要に応じて、JavaScriptでスクリプトを作成できます（以下のnarendraの回答を参照）

— KeatsKelleher

9

私のhtmlの知識を使用すると（ここでは適用されない可能性があります）、g要素のサイズが暗黙的に指定されているようです。長方形をそのサイズに拡大したいと思います。

— George Mauer

2

グループはそのコンテンツに適合しますが、その逆ではありません。要素はまだ親svgに関連していると思います。

— 修二2016年

ここでグループ要素は重要ですか？

— dmo

66

プログラムでD3を使用：

body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')

— ナレンドラクマールプラダン
ソース

11

これは、OPが望むように表示するマークアップを生成しますが、OPが実行しようとしていることを実行しません（これは合法ではありません）。これはまだ生成され<svg><rect/><text/></svg>ます。

— ジョシュアテイラー

7

JavaScript！= SVG。質問にはsvg、text、rectのタグが付けられています。ユーザーがプログラミング言語にアクセスできることを示すものは何もありません。（私が静的なソリューションを探してここに来てからこの発言をしています。）

— aioobe

6

これは本当のことですが、私および明らかに他の多くの人々がD3のためにここに来た質問には関係ありません

— cosmichero2025

1

四角形をテキストの幅に自動調整することは可能ですか

— Colin D

1

@Colin Dそれも私が探しているものです。しかし、それが自動的に行われることを期待することは不可能に見えます。代わりに、それを達成するために自分で手動で行う必要があります。両方の要素（四角形とテキスト）の寸法（幅および/または高さ）のいくつかの測定が必要になります。

— Lex Soft

7

foreignobjectを使用してより細かく制御し、rectまたはcircleの上にリッチHTMLコンテンツを配置できます。

    <svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="250" height="250" fill="aquamarine" />
        <foreignobject x="0" y="0" width="250" height="250">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div>Here is a long text that runs more than one line and works as a paragraph</div>
                <br />
                <div>This is <u>UNDER LINE</u> one</div>
                <br />
                <div>This is <b>BOLD</b> one</div>
                <br />
                <div>This is <i>Italic</i> one</div>
            </body>
        </foreignobject>
    </svg>

スニペットを展開

— e03050
ソース

text-tags-onlyオプションとは異なり、これは実際にはテキストをパスの上に配置するのではなく、その上にある見えないスペースにテキストを配置します！属性は私のために必要ではありませんでしたが、としたか、それも見られるようにどこにもなかったです！xywidthheight

— マットアーノルド

4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(145,200,103);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(132,168,86);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="220" height="30" class="GradientBorder" fill="url(#grad1)" />
  <text x="60" y="20" font-family="Calibri" font-size="20" fill="white" >My Code , Your Achivement....... </text>
  </g>
</svg>

— ナレンドラクマールプラダン
ソース

0

基本的なJavaScriptを使用して、プログラム上でテキストを四角形の上に表示する

 var svg = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];

        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', 20);
        text.setAttribute('y', 50);
        text.setAttribute('width', 500);
        text.style.fill = 'red';
        text.style.fontFamily = 'Verdana';
        text.style.fontSize = '35';
        text.innerHTML = "Some text line";

        svg.appendChild(text);

        var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text2.setAttribute('x', 20);
        text2.setAttribute('y', 100);
        text2.setAttribute('width', 500);
        text2.style.fill = 'green';
        text2.style.fontFamily = 'Calibri';
        text2.style.fontSize = '35';
        text2.style.fontStyle = 'italic';
        text2.innerHTML = "Some italic line";

       
        svg.appendChild(text2);

        var text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text3.setAttribute('x', 20);
        text3.setAttribute('y', 150);
        text3.setAttribute('width', 500);
        text3.style.fill = 'green';
        text3.style.fontFamily = 'Calibri';
        text3.style.fontSize = '35';
        text3.style.fontWeight = 700;
        text3.innerHTML = "Some bold line";

       
        svg.appendChild(text3);

    <svg width="510" height="250" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="510" height="250" fill="aquamarine" />
    </svg>

スニペットを展開

— e03050
ソース