SVG:rect内的文本
我想在 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>
但它不起作用.
Kea*_*her 214
这是不可能的.如果要在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>- 有没有办法不必手动设置矩形的高度和宽度？ (14认同)
- 使用我的html知识 - 这可能不适用于此处 - 似乎`g`元素在这里有一个隐式大小,我希望矩形扩展到它的大小. (8认同)
- 该组不符合其他方式.我认为元素仍然相对于父svg. (2认同)
小智 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')
- 这会产生*显示*像OP想要的标记,但它不会做OP正在尝试做的事情(这是不合法的).这仍然会产生`<svg> <rect /> <text /> </ svg>`. (10认同)
- Javascript!= SVG.问题用svg,text和rect标记.没有任何迹象表明用户可以访问编程语言.(自从我来到这里寻找静态解决方案以来,请发表此评论.) (6认同)
- 虽然这是真的,这与我的问题无关,显然很多其他人来到这里为D3 (4认同)
e03*_*050 20
您可以使用外来对象进行更多控制并将丰富的 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>
- 与仅“文本”标签选项不同，此选项实际上将文本放置在路径内，而不是将其隐藏在其上方的某个不可见空间中！“x”和“y”属性对我来说不是必需的，但“宽度”和“高度”是或者也根本看不到！ (3认同)
- 这是一个很棒的答案。唯一的缺点是IE11不支持foreignObject；但对此浏览器的支持即将消失，因此这可能不是问题。这比使用一堆 tspan 简单得多。 (3认同)
- 不要使用foreignObject，它没有得到正确的支持，并且可能永远不会被像Safari这样的浏览器支持。自十年前以来它就存在错误 https://bugs.webkit.org/show_bug.cgi?id=23113 (3认同)
小智 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 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>
| 归档时间： |
|
| 查看次数： |
182790 次 |
| 最近记录： |