SVG：矩形内的文本
Posted
技术标签:
【中文标题】SVG：矩形内的文本【英文标题】：SVG: text inside rect 【发布时间】：2011-10-07 04:56:17 【问题描述】：我想在 内部 SVG rect 显示一些文本。有可能吗？
我试过了
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" fill="red">
<text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
</rect>
</g>
</svg>
但它不起作用。
【问题讨论】：
insert text between a rectangle drawn in svg. 的可能重复项 这能回答你的问题吗？ Insert text between a rectangle drawn in SVG 【参考方案1】：您可以使用foreignobject 进行更多控制并将丰富的 html 内容放置在矩形或圆形上
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" fill="aquamarine" />
<foreignobject x="0" y="0" >
<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 选项不同，这个选项实际上将文本放置在路径内，而不是将其隐藏在其上方的某个不可见空间中！ x 和 y 属性对我来说不是必需的，但 width 和 height 是或者它也无处可见！
这是一个绝妙的答案。唯一的缺点是IE11不支持foreignObject；但是对这个浏览器的支持正在消失，所以这可能不是问题。这比使用一堆 tspan 简单得多。【参考方案2】：
使用基本 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 xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" fill="aquamarine" />
</svg>【讨论】：
【参考方案3】：这是不可能的。如果要在 rect 元素中显示文本，则应将它们放在一个组中，文本元素位于 rect 元素之后（因此它显示在顶部）。
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" fill="red"></rect>
<text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</g>
</svg>【讨论】：
有没有办法不必手动设置矩形的高度和宽度？ 取决于具体情况以及“手动”的含义。如果你愿意，你可以用 JavaScript 编写脚本（见下面 narendra 的回答） 使用我的 html 知识 - 这可能不适用于这里 - 似乎g 元素在这里有一个隐式大小，我希望矩形扩展到它的大小。
该组适合其内容，而不是相反。我认为这些元素仍然相对于父 svg。
组元素在这里很重要吗？【参考方案4】：
以编程方式使用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')
【讨论】：
这会产生像 OP 想要的那样 显示 的标记，但它不会做 OP 试图做的事情（这是不合法的）。这仍然会产生<svg><rect/><text/></svg>。
Javascript != SVG。这个问题用 svg、text 和 rect 标记。没有任何东西表明用户可以访问编程语言。 （因为我来这里寻找静态解决方案，所以发表此言论。）
虽然这是真的，但这与我的问题无关，显然还有很多其他人来这里是为了 D3
是否可以将矩形自动调整为文本的宽度
@Colin D 这也是我想要的。但看起来不可能期望它自动完成。相反，我们必须自己手动完成以实现这一目标。它需要测量两个元素（矩形和文本）的尺寸（宽度和/或高度）。【参考方案5】：
<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 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>
【讨论】：
以上是关于SVG：矩形内的文本的主要内容，如果未能解决你的问题，请参考以下文章