SVG在textPath上带圆圈的文本(居中对齐) [英] SVG Circled Text on textPath (center align)

问题描述

我在与SVG相关的带圆圈的文本上遇到了问题.我的目标是创建一条路径，使我可以在上面写东西，但也可以使文本居中，同时仍然保持我的路径(从圆圈的顶部开始).

I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle.

示例

这就是它的样子(内部图片)

问题

当前，我正在使用textPath +路径组合来生成路径并在其上写.

Currently I'm using textPath + path combination to generate path and write on it.

<svg>
<defs>
<path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" />
</defs>
<text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text>
</svg>

我也尝试过Raphael库来管理它的工作，但是严重的是我做不到我想做的事.这里真的有人设法使它起作用吗?还是有办法做到这一点?

I also tried Raphael library to manage it work, but seriously I can't do what I want. Is here somebody who actually managed to make it work? Or is there any way to make it so?

推荐答案

将文本路径定义为要绘制的椭圆弧的完整上半球:

define your text path as the complete upper hemisphere of the elliptical arc you want to draw on:

<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />

，然后将textPath的startOffset设置为50％.请注意，您的svg文件格式不正确，因为它缺少xlink的名称空间定义.以下是一个有效的独立示例:

and set the startOffset of your textPath to 50%. note that your svg file is not well-formed as it is lacking the namespace definition for xlink. the following is a working standalone example:

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text>
</svg>

re:提出一种解决方案，以解决所有问题: 要点是定义沿整个圆周延伸的文本路径，如下所示:

re: comment on a solution for going all teh way around the circle: the gist is to define the text path to extend along the whole circumference, like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text>
</svg>

这篇关于SVG在textPath上带圆圈的文本(居中对齐)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！