矩形内的文本

我想在SVG矩形内显示一些文本。这是可能的吗?

我试着

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

但这并不奏效。

这是不可能的。如果你想在一个矩形元素中显示文本，你应该把它们放在一个组中，文本元素在矩形元素之后(所以它出现在顶部)。

< svg xmlns = " http://www.w3.org/2000/svg " > < g > <矩形x = " 0 " y = " 0 "宽度= " 100 "高度= " 100 "填补=“红色”> < /矩形> <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text> . < / g > < / svg >

2011-07-18 11:59:07

以编程方式使用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')

2012-08-13 13:17:29

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

2012-08-13 13:21:16

您可以使用foreignobject进行更多控制，并将丰富的HTML内容放置在矩形或圆上

2019-08-20 06:18:58

使用基本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>

2019-08-20 07:01:50

矩形内的文本

推荐文章

最新文章

标签