马黑黑 发表于 2025-9-29 13:22

让svg文本在路径上居中

本帖最后由 马黑黑 于 2025-9-29 13:24 编辑 <br /><br /><style>
        svg { display: block; margin: 20px auto; border: 1px solid gray; }
        .artBox { font-size: 18px; }
        .codebox { padding: 16px; background: beige; white-space: pre-wrap; }
        txt-red { color: red; }
</style>

<div class="artBox">
        <p>假设我们有一个半圆弧路径和一行文本，如下：</p>
        <svg width="600" height="300">
                <path id="txtpath1" d="M10 280 Q300 -150,590 280" fill="none" stroke="rgba(0,0,0,.25)" stroke-width="4" />
                <text x="100" y="200" fill="teal" style="font: bold 2.6em sans-serif; letter-spacing: 4px;">
                        花朝论坛天下花潮
                </text>
        </svg>
        <p>现在我们希望文本沿着路径走且文本处在路径的中央即在水平方向文本是居中的。实现此需求，需要：</p>
        <pre class="codebox">① &lt;text&gt; 标签 x、y 均设为 0，水平对齐 anchor 设为 middle；
② 文本使用&lt;text&gt; 标签的子标签 &lt;textPath&gt; 装载；
③ &lt;textPath&gt; 标签绑定路径；
④ &lt;textPath&gt; 标签设置文本起点偏移量 startOffset 为 50%；

【核心】
    text-anchor 设为 middle 使得文本的右端在路径上居中，startOffset 设为 50% 是的文本左端起点偏移路径的一半距离，两者结合恰好令文本在路径的两端范围内居中。        </pre>
        <p>以下是 svg 完整代码：</p>
        <pre id="codePre" class="codebox">
&lt;svg width="600" height="300"&gt;
        &lt;path id="txtpath" d="M10 280 Q300 -150,590 280" fill="none" stroke="rgba(0,0,0,.25)" stroke-width="4" /&gt;
        &lt;text x="0" y="0" fill="teal" style="font: bold 2.6em sans-serif; letter-spacing: 4px; <txt-red>text-anchor: middle;</txt-red>"&gt;
                &lt;textPath href="#txtpath" <txt-red>startOffset="50%"</txt-red>&gt;花朝论坛天下花潮&lt;/textPath&gt;
        &lt;/text&gt;
&lt;/svg&gt;</pre>
        <p>效果：</p>
        <div id="showRes"></div>
</div>

<script>
        showRes.innerHTML = codePre.textContent;
</script>

梦江南 发表于 2025-9-29 15:32

这个文本路径设计得巧妙，黑黑老师辛苦了。{:4_190:}

小辣椒 发表于 2025-9-29 16:22

这个写文字的朋友可以玩的了{:4_199:}

马黑黑 发表于 2025-9-29 18:11

梦江南 发表于 2025-9-29 15:32
这个文本路径设计得巧妙，黑黑老师辛苦了。

SVG很繁琐的

马黑黑 发表于 2025-9-29 18:11

小辣椒 发表于 2025-9-29 16:22
这个写文字的朋友可以玩的了

可以的

樵歌 发表于 2025-9-29 19:23

很适用，很巧妙，很喜欢，但还得让@小辣椒 二传下{:4_189:}

马黑黑 发表于 2025-9-29 19:30

樵歌 发表于 2025-9-29 19:23
很适用，很巧妙，很喜欢，但还得让@小辣椒 二传下

{:4_172:}

樵歌 发表于 2025-9-29 19:34

小辣椒 发表于 2025-9-29 16:22
这个写文字的朋友可以玩的了

以后就指靠你了{:4_185:}

樵歌 发表于 2025-9-29 19:35

马黑黑 发表于 2025-9-29 19:30


对我来说，这是必须的一道手续呵{:4_198:}

马黑黑 发表于 2025-9-29 20:01

樵歌 发表于 2025-9-29 19:35
对我来说，这是必须的一道手续呵

应该的

红影 发表于 2025-9-29 22:53

text-anchor 设为 middle，startOffset 设为 50%，两者结合即可。嗯嗯，学习了，谢谢黑黑{:4_187:}

马黑黑 发表于 2025-9-29 23:40

红影 发表于 2025-9-29 22:53
text-anchor 设为 middle，startOffset 设为 50%，两者结合即可。嗯嗯，学习了，谢谢黑黑

svg文本对齐的设置和HTML有所不同

马黑黑 发表于 2025-9-29 23:40

樵歌 发表于 2025-9-29 19:35
对我来说，这是必须的一道手续呵

{:4_191:}

杨帆 发表于 2025-9-30 00:41

svg文本是又一个新知识点，谢谢老师{:4_190:}

马黑黑 发表于 2025-9-30 12:09

杨帆 发表于 2025-9-30 00:41
svg文本是又一个新知识点，谢谢老师

svg文本设置非常复杂

杨帆 发表于 2025-9-30 13:03

马黑黑 发表于 2025-9-30 12:09
svg文本设置非常复杂

是啊，期待老师推出一个专题讲座，攻坚克难，化繁为简，惠泽大众{:4_190:}

马黑黑 发表于 2025-9-30 13:22

杨帆 发表于 2025-9-30 13:03
是啊，期待老师推出一个专题讲座，攻坚克难，化繁为简，惠泽大众

这个，简单教程里的文章介绍的比较好，也容易看懂

杨帆 发表于 2025-9-30 14:02

马黑黑 发表于 2025-9-30 13:22
这个，简单教程里的文章介绍的比较好，也容易看懂

也好，我找找简单教程~

不过，还是喜欢老师的教程：提纲挈领，言简意赅，深入浅出。{:4_180:}

马黑黑 发表于 2025-9-30 16:54

杨帆 发表于 2025-9-30 14:02
也好，我找找简单教程~

不过，还是喜欢老师的教程：提纲挈领，言简意赅，深入浅出。

我的有针对性但不系统

杨帆 发表于 2025-9-30 21:05

马黑黑 发表于 2025-9-30 16:54
我的有针对性但不系统

做到针对性不易，也是突出重点、突破难点、提高效率的关键{:4_176:}
页: [1] 2
查看完整版本: 让svg文本在路径上居中