SVG：文本里面的文字
我想在 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>
但它不起作用。
这不可能。 如果你想在一个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>
以编程方式使用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')
<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>
