SVG中心文字圈

Question

我正试图用svg将文本放在一个圆圈中心.

文本的大小将是动态的.

谢谢你的Avi

plunker

我的代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">

  <g id="UrTavla">
      <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">

      </circle>
      <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
  </g>
</svg>

Answer 1

只需添加text-anchor="middle"到text元素.

Plunker

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 500 500">
  <g id="UrTavla">
    <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
    </circle>
    <text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I’m centered!Look, I’m centered!</text>
  </g>
</svg>

Answer 2

当你想绘制一个circle不以容器为中心的解决方案时,建议和接受的解决方案是INVALID !

x="50%"仅当SVG元素包含以viewPort为中心的圆时,才能在标记上使用x ="50%"x ="50%" .

如果要绘制3个圆,则还必须更改(x,y)文本坐标,使它们等于(cx,cy)圆坐标在以下示例中完成

<svg height="350" width="350">
    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

备注:我已提议改进已接受的答案,但这已被作者拒绝.所以我没有其他解决方案来发布我的答案!

Answer 3

也许,也可以使用alignment-baseline ="middle",text-anchor ="middle":

  <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle"> Look, I’m centered!Look, I’m centered! </text>

这是一个很好的资源:http: //apike.ca/prog_svg_text_style.html

干杯

Answer 4

使用 的浏览器之间的行为不一致alignment-baseline="central"。值得注意的是，Chrome 会正确定位，但 Firefox 不会。如果您使用dominant-baseline="central"它，它将在两者中正确显示。

火狐：

铬合金：

svg { height:140px }

<h4>alignment-baseline AND dominant-baseline settings:</h4>
<svg viewBox="0 0 48 48">
    <circle stroke="darkgray" stroke-width="1px" 
            fill="lightgray"  cx="50%" cy="50%" r="48%"/>
    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/>
    <text text-anchor="middle" alignment-baseline="central" x="50%" y="50%">central</text> 
</svg>
<svg viewBox="0 0 48 48">
    <circle stroke="darkgray" stroke-width="1px" 
            fill="lightgray"  cx="50%" cy="50%" r="48%"/>
    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/>
    <text text-anchor="middle" alignment-baseline="middle" x="50%" y="50%">middle</text> 
</svg>
<svg viewBox="0 0 48 48">
    <circle stroke="darkgray" stroke-width="1px" 
            fill="lightgray"  cx="50%" cy="50%" r="48%"/>
    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/>
    <text text-anchor="middle" dominant-baseline="central" x="50%" y="50%">central</text> 
</svg>
<svg viewBox="0 0 48 48">
    <circle stroke="darkgray" stroke-width="1px" 
            fill="lightgray"  cx="50%" cy="50%" r="48%"/>
    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="blue" stroke-width="1"/>
    <text text-anchor="middle" dominant-baseline="middle" x="50%" y="50%">middle</text> 
</svg>

Answer 5

一个适用于非中心圆的更简单的解决方案是将圆和文本放在翻译组中。

这样你就不需要在文本上重复坐标。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centered texts</title>
  </head>

  <body ng-controller="MainCtrl">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <g transform="translate(300, 300)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m centered!</text>
      </g>
      
      <g transform="translate(150, 150)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m also centered!</text>
      </g>
    </svg>
  </body>
</html>