SVG:矩形内的文本
SVG:矩形内的文本
提问于 2011-07-18 00:43:20
我想在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>但它不起作用。
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-07-18 19:59:08
这是不可能的。如果你想在一个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>
Stack Overflow用户
发布于 2012-08-13 21:17:30
以编程方式使用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')Stack Overflow用户
发布于 2019-08-20 14:18:58
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6725288
复制相关文章
相似问题