Văn bản trung tâm SVG trong vòng tròn

Question

Tôi đang cố gắng căn giữa văn bản trong vòng tròn với svg.

kích thước của văn bản sẽ là động.

Thank của Avi

plunker

Mã của tôi:

<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

Chỉ cần thêm text-anchor="middle" tới phần tử 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

Có lẽ, có thể cũng hữu ích alignment-cơ sở = "middle", với văn bản neo = "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> 

Dưới đây là một nguồn lực tốt: http://apike.ca/prog_svg_text_style.html

Cheers