我得到了与有关SVG盘旋文字的问题。 我的目标是创建路径,这将让我在上面写,但也居中文本,还跟踪我的路 - 从圆的顶部。
例
这就是它看起来像 (图像内)
问题
目前我使用textPath +路径的组合来产生路径,并写在上面。
<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>
我也试过拉斐尔库来管理它的工作,但严重的,我不能做我想做的。 是有人在这里究竟是谁设法使它工作吗? 或者是有什么办法,使会这样呢?
定义你的文本路径,只要你想上绘制椭圆弧的完整的上半球:
<path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />
并设置startOffset
您的textPath
至50%。 请注意,您的SVG文件的格式不正确,因为它缺乏对XLink的命名空间的定义。 下面是一个工作的独立例如:
<?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>
回复:关于去绕了一圈都德的方式解决意见:要点是定义文本路径沿着整个圆周延伸,就像这样:
<?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>