SVG在textPath上的帶圓圈的文本（中心對齊）

我遇到了與SVG相關的圓圈文本問題。我的目標是創建一條可以讓我寫作的路徑，但也可以將文本居中，仍然跟蹤我的路徑 - 從圓圈的頂部。SVG在textPath上的帶圓圈的文本（中心對齊）

例

問題

目前我使用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>

我也試過拉斐爾圖書館管理它的工作，但認真我不能做我想做的事。這裏有人真正設法使它工作嗎？或者有什麼辦法可以做到這一點？

來源

2013-03-19 OldNurse

定義的文本路徑，只要你想上繪製橢圓弧的完整的上半球：

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

，並設置你的textPath〜50％startOffset。請注意，您的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>

來源

2013-03-19 10:09:54 collapsar

_定義您的文本路徑爲您要繪製的橢圓弧的完整上半球：_如果我需要完整的圓圈寫入，該怎麼辦？然後怎樣呢？ – OldNurse 2013-03-19 10:21:28

SVG在textPath上的帶圓圈的文本（中心對齊）

回答

相關問題