SVG中的多行弯曲文本答案

【问题标题】：Multiple lines of curved text in SVGSVG中的多行弯曲文本
【发布时间】：2011-07-08 07:51:13
【问题描述】：

在 SVG 中有没有一种方法可以在单个 <text> 元素中绘制多行文本，它们遵循相同的路径轮廓？这是我能得到的最接近的：

<?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 中）：

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

我希望每行文本都以弧的顶部为中心，而不是从那里开始文本。当沿路径在tspan 中指定x 值时，似乎忘记了text-anchor 属性。（这不是纯文本的情况；text-anchor 属性会被记住。）
每行连续的文本都被压缩，就像遵循同心路径一样。我希望每行文本都遵循相同的轮廓，就好像路径只是在y 方向上按字体高度平移一样。

我知道我可以创建三个单独的 <path> 元素并将它们与三个单独的 <text>（或 <textPath>）元素相关联，但是使用 <tspan> 元素将所有文本逻辑地保持在一起会非常好供以后申请。

或者这应该可以工作，但 Chrome 中存在渲染错误？（不太可能，IMO）

【问题讨论】：

您的示例在 Opera 11 和 Firefox 4 中按预期工作，即：文本以曲线为中心。
@Erik：很好的信息；谢谢！它是否还会平移路径的轮廓（根据需要），或者像 Chrome 一样将其向下投影，从而导致后续线条被挤压在一起？（如果你想把你的回应放在一个答案中，我认为这是值得赞扬的。）

标签： google-chrome svg

【解决方案1】：

我不知道您是希望将文本呈现在同心圆上还是只是希望将其翻译。如果是前者，那么您可能想在 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>

但是，如果您想要后者（同心圆），这似乎可以在 Mac 上的 Safari 和 Chrome 中使用：

<?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>

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

HTH, 凯文

【讨论】：