Question

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

Curved text

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

我希望每行文字都以弧顶为中心，而不是在那里开始文字。在text-anchor沿路径指定x值时，似乎忘记了tspan属性。（这是不直文的情况;记住text-anchor属性。）

每个连续的文本行都是嘎吱嘎吱的，好像沿着同心的路径行进。我希望每行文本都遵循相同的轮廓，就好像路径只是在y方向上被字体的高度翻译一样。

我知道我可以创建三个单独的<path>元素，并将它们与三个独立的<text>（或<textPath>）元素相关联，但将逻辑上保留所有文本真的很好将<tspan>元素一起用于以后的应用程序。

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

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

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

HTH，凯文

SVG中有多行弯曲文本

1 个答案: