在矩形中插入文本的一种方法是插入一个外部对象，它是一个DIV，在矩形对象中。

这样，文本将遵守DIV的限制。

var g = d3.select("svg"); g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width","100%") .attr("height","100%") .attr("fill","#000"); var fo = g.append("foreignObject") .attr("width","100%"); fo.append("xhtml:div") .attr("style","width:80%;color:#FFF;margin-right: auto;margin-left: auto;margin-top:40px") .text("Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis"); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script> <svg width="200" height="200"></svg>

如果你是用编程的方式创建SVG，你可以简化它，做这样的事情:

  <g>
      <rect x={x} y={y} width={width} height={height} />
      <text
          x={x + width / 2}
          y={y + height / 2}
          dominant-baseline="middle"
          text-anchor="middle"
      >
          {label}
      </text>
  </g>

对齐基线不是这里应该使用的正确属性。正确的答案是使用支配基线="central"和文本锚="middle"的组合:

<svg width="200" height="100"> < g > <rect x="0" y="0" width="200" height="100" style="stroke:red;笔划宽度:3 px;填充:白色;" / > <text x="50%" y="50%" style=" font - family:宋体;文本链接:中间;字体大小:40像素;“>文本文本> < / < / g > < / svg >

SVG 1.2 Tiny添加了文本换行，但是您在浏览器中看到的大多数SVG实现(Opera除外)都没有实现这个特性。这通常取决于您(开发人员)手动定位文本。

SVG 1.1规范很好地概述了这一限制，以及克服它的可能解决方案:

Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods: The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text). The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters who start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.) Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)

http://www.w3.org/TR/SVG11/text.html#Introduction

As a primitive, text wrapping can be simulated by using the dy attribute and tspan elements, and as mentioned in the spec, some tools can automate this. For example, in Inkscape, select the shape you want, and the text you want, and use Text -> Flow into Frame. This will allow you to write your text, with wrapping, which will wrap based on the bounds of the shape. Also, make sure you follow these instructions to tell Inkscape to maintain compatibility with SVG 1.1: https://wiki.inkscape.org/wiki/Frequently_asked_questions#What_about_flowed_text.3F

此外，还有一些JavaScript库可以用来动态自动化文本包装: https://old.carto.net/papers/svg/textFlow/

值得注意的是，CSVG将形状包装到文本元素的解决方案(例如，参见他们的“按钮”示例)，尽管重要的是要提到他们的实现在浏览器中不可用: https://users.monash.edu/~clm/csvg/about.html

我提到这一点是因为我已经开发了一个csvg启发的库，它允许您做类似的事情，并且可以在web浏览器中工作，尽管我还没有发布它。

我花了很长时间使用SVG来使任何东西居中，所以我滚动了自己的小函数。希望它能帮助到你。注意，它只适用于SVG元素。

function centerinparent(element) { //only works for SVG elements
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}

Full detail blog: https://web.archive.org/web/20180717015233/http://blog.techhysahil.com:80/svg/how-to-center-text-in-svg-shapes/ <svg width="600" height="600"> <!-- Circle --> <g transform="translate(50,40)"> <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- In Rectangle text position needs to be given half of width and height of rectangle respectively --> <!-- Rectangle --> <g transform="translate(150,20)"> <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect> <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> <!-- Rectangle --> <g transform="translate(120,140)"> <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse> <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text> </g> </svg>