SVG中的多行曲线文本

SVG中有一种在单个<text>元素中绘制多行文本并遵循相同路径轮廓的方法吗？这里是我已经能够获得最接近：SVG中的多行曲线文本

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
     <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> 
    </defs> 
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/> 
    <text font-family="Arial" font-size="18px" text-anchor="middle"> 
     <textPath xlink:href="#text_0_path" startOffset="50%"> 
      <!-- 157.075 is the center of the length of an arc of radius 100 --> 
      <tspan x="157.075">Here is a line</tspan> 
      <tspan x="157.075" dy="20">Here is a line</tspan> 
      <tspan x="157.075" dy="20">Here is a line</tspan> 
     </textPath> 
    </text> 
</svg>

这里是输出（在Chrome）：

Curved text

这是几乎我想要的东西。问题：

我想每行文本居中在弧的顶部，而不是在那里启动文本。当沿路径在tspan中指定x值时，似乎text-anchor属性被遗忘。（这是而不是与连续文本的情况; text-anchor属性被记住。）
每个连续的文本行被捣碎，仿佛遵循同心圆路径。我希望每行文本都遵循相同的轮廓，就好像路径只是在y方向上翻译字体的高度。

我知道我可以只创建三个独立的<path>元素，并将它们与三个独立<text>（或<textPath>）元素相关联，但它会是非常好的，保持逻辑上一起使用更高版本的应用<tspan>元素中的所有文本。

或者这是假设工作，但Chrome中存在渲染错误？（不太可能，国际海事组织）

来源

2011-03-03 Dave Mateer

你的榜样将按预期在Opera 11和Firefox 4，那就是：文本曲线上居中。 – 2011-03-03 22:38:42

@Erik：好的信息;谢谢！它是否也翻译路径的轮廓（如需要），还是像Chrome一样将其投影下来，导致后续行的挤压？（如果你想把你的回答作为答案，我认为值得赞扬。） – 2011-03-04 13:23:12

我不能告诉你是否想在同心圆上呈现文本，或者如果你只是想要它翻译。如果是前者，那么你可能想在你的t-span元素上试验字母间距属性。这会为你的角色添加追踪，将他们推得更远。我尝试以下，但字里行间对齐丢失某些原因：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
     <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> 
    </defs> 
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/> 
    <text font-family="Arial" font-size="18px" text-anchor="middle"> 
     <textPath xlink:href="#text_0_path" startOffset="50%"> 
      <!-- 157.075 is the center of the length of an arc of radius 100 --> 
      <tspan x="157.075">Here is a line</tspan> 
      <tspan x="157.075" dy="20" letter-spacing="2">Here is a line</tspan> 
      <tspan x="157.075" dy="20" letter-spacing="4">Here is a line</tspan> 
     </textPath> 
    </text> 
</svg>

但是，如果你想后者（同心圆），这似乎在Safari和Chrome的工作在Mac上：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
     <path id="text_0_path" d="M 100 150 A 100 100 0 1 1 300 150"/> 
    </defs> 
    <use xlink:href="#text_0_path" stroke="blue" fill="none"/> 
    <g font-family="Arial" font-size="18px"> 
     <text text-anchor="middle"> 
      <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> 
     </text> 
     <text text-anchor="middle" transform="translate(0, 20)"> 
      <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> 
     </text> 
     <text text-anchor="middle" transform="translate(0, 40)"> 
      <textPath xlink:href="#text_0_path" startOffset="50%">Here is a line</textPath> 
     </text> 
    </g> 
</svg>

我知道你只是拍摄tspans，但正如你所说，它似乎重置了startOffset值。

HTH，凯文

来源

2011-07-18 21:42:01 thelonious

SVG中的多行曲线文本

回答

相关问题