SVG:矩形内的文本


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>

但这是行不通的。


Answers:


240

这是不可能的。如果要在rect元素内显示文本,则应将它们都放在一个组中,且text元素应位于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>


19
有没有一种方法不必在矩形上手动设置高度和宽度?
乔治·莫尔

取决于情况和“手动”的含义。如果愿意,可以使用JavaScript编写脚本(请参阅下面的
narendra

9
使用我的html知识-这可能不适用于这里-似乎g元素在这里具有隐式大小,我希望矩形扩展到它的大小。
George Mauer 2012年

2
该组适合其内容,而不是其他方式。我认为元素仍然相对于父级svg。
shuji 2016年

小组元素在这里重要吗?
dmo '17

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

7
Javascript!= SVG。该问题被标记为svg,文本和矩形。没有任何内容表明用户有权使用编程语言。(自从我来这里是为了寻求静态解决方案起,就发表了这一评论。)
aioobe

6
尽管这确实是我的问题,但我和其他人显然都来过D3
cosmichero2025,18年

1
是否可以将rect自动调整为文本的宽度
Colin D

1
@Colin D这也是我在寻找的东西。但是看起来不可能期望它会自动完成。相反,我们必须手动完成此操作。它将需要对两个元素(矩形和文本)的尺寸(宽度和/或高度)进行一些测量。
Lex Soft

7

您可以使用foreignobject进行更多控制,并将丰富的HTML内容放置在rect或circle上

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

在此处输入图片说明


text-tags-only选项不同,此选项实际上将文本放置在路径内,而不是将其隐藏在路径上方的一些不可见空间中!在xy属性没有必要对我来说,但widthheight人或它也是无处可见!
Matt Arnold

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以编程方式在rect上显示文本

 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>

在此处输入图片说明

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.