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>

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>

在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;
}

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>

如果你是用编程的方式创建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>

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