月是故乡明

马黑黑

<svg id="msvg" width="800" height="400" viewBox="-200 -100 400 200"></svg> <script type="module"> import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js'; var dr = Dr.dr('msvg'); const txt = '月是故乡明'; const path = 'M-150 92 A150 150 0 0 1 150 92'; dr.setsvg({style: 'background: #333;'}); dr.defs('defs'); dr.path(path, 'none', 'olive').id('tpath').addTo('defs'); dr.text(txt) .style(` font: bold 50px sans-serif; fill: #fdb813; stroke: #daa520; stroke-width: 1; text-anchor: middle; dominant-baseline: middle; `) .sets({ textLength: 400, lengthAdjust: 'spacing' }) .textPath('tpath', '50%'); dr.circle(0, 40, 50, '#fdb813'); </script>

马黑黑

本帖演示：svg文本在路径上均匀分布

svg文本设置相关知识点：

/**
   CSS属性：

   ① text-anchor: middle; // 文本锚点，缺省或start从路径中间开始，end文本结束处在中间
   ② dominant-baseline: middle; // 垂直定位，缺省在路径上方、hanging在路径下方

   非CSS属性：

   ① letter-spacing : 调节字符间距，针对单词间距应使用 word-spacing
   ② textLength : 文本长度，文本会根据此属性值自动调整间距。如果需要可以设置和路径一样的长度，路径长度可以使用语句 路径.getTotalLength() 获取
   ③ lengthAjust : 配合 textLength 属性设置文本变化规则，spacing 调整字符间距，spacingAndGlyphs 调整字宽

   【注意】如果使用了 textLength 属性设置文本长度，letter-spacing 属性应缺省
**/

本例，通过文本的CSS基础设置，主要处理文本字体、水平方向对齐、垂直方向对齐、填充、描边等文本设置，再通过CSS text标签的属性 textLenth（文本长度）、lengthAjust（文本对齐规则）设置文本在路径上的排列行为，实现了文本在路径上均匀分布的效果。

核心：textLength 文本长度设置

主要是得事先知道路径的长度，可以使用JS语句 路径.getTotalLength() 获取，例如本例的路径 id="tpath"，可以在控制台打印出它的长度：

        console.log(tpath.getTotalLength());

然后根据需要设置文本 text 标签的属性 textLength，可以和路径长度一样，也可以略小一些。textLength 属性能将文本均匀分布于该距离。

至于 lengthAjust 属性，它是辅助性属性，配合 textLength 制定文本的排列行为，有两个值可选，spacing 和 spacingAndGlyphs，上面已经有说明。

小辣椒

我复制了代码预览了效果月亮很圆很大，文字也是大，效果不错，不敢发这里，怕代码冲突

马黑黑

小辣椒 发表于 2025-10-6 13:09
我复制了代码预览了效果月亮很圆很大，文字也是大，效果不错，不敢发这里，怕代码冲突

不会冲突

小辣椒

马黑黑 发表于 2025-10-6 13:10
不会冲突

不会啊，那我发这里看看

小辣椒

小辣椒

不行，不能发二个，一个不出来了

红影

还要给出文本长度啊，还以为给出路径了，有路径长度，就直接自动去分配文字了呢。
学习了，感谢黑黑好帖

马黑黑

红影 发表于 2025-10-6 14:39
还要给出文本长度啊，还以为给出路径了，有路径长度，就直接自动去分配文字了呢。
学习了，感谢黑黑好帖{: ...

如果不给文本长度，可以考虑 letter-spacing，设置恰当的值也是可以的。当需要文本基本占满路径，设置文本长度为路径长度然后配合其它设置的做法效果更佳

马黑黑

小辣椒 发表于 2025-10-6 13:38
不行，不能发二个，一个不出来了

里面涉及到 id 问题。HTML、XML元素的id是唯一的，同一页里只能有一个，否则冲突。前面我说不冲突指的是不和我的一楼产生冲突，因为一楼并没有直接运行代码，不存在 id="msvg"、id="tpath" 这几个 id 的真实元素。而你发了一个，就存在了，发第二个得相应修改 id（有多少个 id 就得修改多少个，除了前面提到的还有一个 id="defs"，第二个你得修改为别的、且 addTo 语句得和修改的一样）。

id 是标签的唯一身份证，和你用身份证住酒店一个道理：假如你住进了404房间，别人的身份证就不能同时也登记入住了（除非是你实现安排好的约会，但那也不需要再登记的，偷偷入住就好）。

樵歌

文G时，陈白达说：毛主席是最红最红的太阳，我是最黄最黄的月亮后来，被造F派揪出来批判得够呛

马黑黑

樵歌 发表于 2025-10-6 17:14
文G时，陈白达说：毛主席是最红最红的太阳，我是最黄最黄的月亮后来，被造F派揪出来批判得够呛{:4 ...

现在没关系了：金黄代表富丽堂皇，是至高荣耀。

小辣椒

马黑黑 发表于 2025-10-6 15:20
里面涉及到 id 问题。HTML、XML元素的id是唯一的，同一页里只能有一个，否则冲突。前面我说不冲突指的是 ...

还有一个修改了颜色，反正感觉也是蛮漂亮的

马黑黑

小辣椒 发表于 2025-10-6 20:36
还有一个修改了颜色，反正感觉也是蛮漂亮的

樵歌

马黑黑 发表于 2025-10-6 17:48
现在没关系了：金黄代表富丽堂皇，是至高荣耀。

那个年代，啥都上纲上线，

马黑黑

樵歌 发表于 2025-10-7 07:05
那个年代，啥都上纲上线，

民智尚未开启，很多荒唐的事情轻而易举推行