gpt4 book ai didi

google-chrome - SVG中的多行弯曲文本

转载 作者:行者123 更新时间:2023-12-04 20:55:32 24 4
gpt4 key购买 nike

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中存在渲染错误? (不太可能,海事组织)

    最佳答案

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

    哈,
    凯文

    关于google-chrome - SVG中的多行弯曲文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5185699/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com