11年太晚了…使用路径长

x="50%" y ="50%"在复杂svg中不起作用

没有人提到pathLength(使它在这里2，所以1是一半)和textPath:

<svg viewbox=“0 0 200 50”> <path id=“P” pathLength=“2” d=“M0 25h200” stroke=“blue”/> <text> <textPath href=“#P” 开始偏移量=“1” 文本锚点=“中间” 主导基线=“中间” fill=“绿色” 字体大小=“14px”>中间对齐</textPath> </text> </svg>

对齐基线不是这里应该使用的正确属性。正确的答案是使用支配基线="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浏览器中工作，尽管我还没有发布它。

For horizontal and vertical alignment of text in graphics, you might want to use the following CSS styles. In particular, note that dominant-baseline:middle is probably wrong, since this is (usually) half way between the top and the baseline, rather than half way between the top and the bottom. Also, some some sources (e.g. Mozilla) use dominant-baseline:hanging instead of dominant-baseline:text-before-edge. This is also probably wrong, since hanging is designed for Indic scripts. Of course, if you're using a mixture of Latin, Indic, ideographs or whatever, you'll probably need to read the documentation.

/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}

编辑:我刚刚注意到Mozilla也使用了支配基线:基线，这是绝对错误的:它甚至不是一个公认的值!我假设它默认的字体是字母，所以他们很幸运。

更多编辑:Safari(11.1.2)理解边前文本，但不理解边后文本。它在表意文字方面也失败了。好东西，苹果。因此，您最终可能不得不使用字母并允许降序。对不起。

我花了很长时间使用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);
}

在SVG中水平和垂直居中文本的简单解决方案:

Set the position of the text to the absolute center of the element in which you want to center it: If it's the parent, you could just do x="50%" y ="50%". If it's another element, x would be the x of that element + half its width (and similar for y but with the height). Use the text-anchor property to center the text horizontally with the value middle: middle The rendered characters are aligned such that the geometric middle of the resulting rendered text is at the initial current text position. Use the dominant-baseline property to center the text vertically with the value middle (or depending on how you want it to look like, you may want to do central)

下面是一个简单的演示:

<svg width="200" height="100"> <rect x="0" y="0" width="200" height="100" stroke="红色" stroke-width="3px" fill="白色"/> <text x="50%" y="50%" main -baseline="middle" text-anchor="middle"> text </text> < / svg >

如果你想把它应用到很多元素上，你也可以把它用于CSS。例如:

svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}