SVG文本对齐之text-anchor和dominant-baseline属性
<style>@import 'https://638183.freep.cn/638183/web/css/hl.css';
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; max-width: 1200px; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
.tMid { text-align: center; }
#msvg { border: 1px solid gray; }
#msvg text { font: bold 30px Sans-serif; }
#textCode { font-size: 18px; }
</style>
<div class="artBox">
<h3>一、text-anchor 属性</h3>
<blockquote>text-anchor 属性用于描述文本与给定点的对齐方式，可以是开头、中间或末尾对齐。此属性可以在 SVG 和 CSS 中使用。具体而言，text-anchor 是 SVG 中用来控制文本水平对齐方式的属性，它决定了文本相对于其坐标点 (x, y) 的排列位置。该属性主要应用于 SVG 的 text、tspan 等文本元素。</blockquote>
<p>💡<b>text-anchor 属性值及其作用</b></p>
<ol>
<li>start: 文本字符串的开始位置即当前文本的初始位置。对于拉丁文，这相当于左对齐</li>
<li>middle: 文本字符串的中间位置即当前文本的初始位置</li>
<li>end: 文本字符串的末尾即当前文本的初始位置。对于拉丁文，这相当于右对齐</li>
</ol>
<h3>二、dominant-baseline 属性</h3>
<blockquote>dominant-baseline（显性基线）属性用于指定用于对齐盒子文本和内联级内容的基线。它还指示参与基线对齐的任何盒子的默认对齐基线。对 SVG 而言，dominant-baseline 属性用来决定 SVG 中文本元素文本的“落脚”依据。此属性可以在 SVG 和 CSS 中使用。</blockquote>
<p>💡<b>dominant-baseline 属性值及其作用</b></p>
<ol>
<li>auto: 默认值，基线取决于 writing-mode 属性的值。如果 writing-mode 是水平的，则基线为 alphabetic；如果是垂直的，则基线为 central</li>
<li>alphabetic: 基线为字母基线（以小写字母 a和x 底部为参照基准）</li>
<li>central: 基线为中央基线</li>
<li>hanging: 基线为悬挂基线</li>
<li>ideographic: 基线为表意基</li>
<li>mathematical: 基线为数学基线</li>
<li>middle: 基线为中间基线</li>
<li>text-bottom: 基线为文本底部</li>
<li>text-top: 基线为文本顶部</li>
</ol>
<h3>三、演示实例</h3>
<p class="tMid">
<svg id="msvg" width="600" height="600" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg">
<line x1="-200" y1="0" x2="200" y2="0" stroke="#eee" />
<line x1="0" y1="-200" x2="0" y2="200" stroke="#eee" />
<text x="0" y="0" fill="skyblue" text-anchor="start" dominant-baseline="alphabetic">ax花朝论坛</text>
</svg>
</p>
<p>
<output>🔸水平对齐 ：</output>
<input id="hrd1" type="radio" value="start" name="hrd" checked>
<label for="hrd1">start</label>
<input id="hrd2" type="radio" value="middle" name="hrd">
<label for="hrd2">middle</label>
<input id="hrd3" type="radio" value="end" name="hrd">
<label for="hrd3">end</label>
</p>
<p>
<output> 🔹垂直对齐 ：</output>
<input id="vrd1" type="radio" value="alphabetic" name="vrd" checked>
<label for="vrd1">alphabetic</label>
<input id="vrd2" type="radio" value="middle" name="vrd">
<label for="vrd2">middle</label>
<input id="vrd3" type="radio" value="central" name="vrd">
<label for="vrd3">central</label>
<input id="vrd4" type="radio" value="hanging" name="vrd">
<label for="vrd4">hanging</label>
</p>
<p>参考代码 ：</p>
<p><code id="textCode" class="hlCode"></code></p>
</div>
<script>
const text = msvg.querySelector('text');
textCode.textContent = text.outerHTML;
.forEach(hrd => {
hrd.onclick = () => {
text.setAttribute('text-anchor', hrd.value);
textCode.textContent = text.outerHTML;
}
});
.forEach(vrd => {
vrd.onclick = () => {
text.setAttribute('dominant-baseline', vrd.value);
textCode.textContent = text.outerHTML;
}
});
</script> 黑黑老师，这代码知识对做歌词有很大帮助。学习了！{:4_187:} 涨知识了，谢谢马老师精彩讲授{:4_190:} 小辣椒欣赏加学习{:4_187:} 我记住了那几个“名词“的样子，也保存了，我觉得对我会有用。谢马老师分享，晚上好{:4_204:}{:4_190:}
与参照物的对齐方式，这个好，还有实例，更清楚了。
感谢黑黑的耐心讲解，学习了{:4_187:} 红影 发表于 2026-7-15 23:08
与参照物的对齐方式，这个好，还有实例，更清楚了。
感谢黑黑的耐心讲解，学习了
这个起始之前介绍过，现在当是温习一下 马黑黑 发表于 2026-7-16 22:09
这个起始之前介绍过，现在当是温习一下
其实已经都忘了，现在复习一下更好{:4_187:} 红影 发表于 2026-7-17 20:51
其实已经都忘了，现在复习一下更好
嗯嗯，很容易忘记 马黑黑 发表于 2026-7-17 21:44
嗯嗯，很容易忘记
是的，也许一直使用才不会忘记。 红影 发表于 2026-7-21 22:26
是的，也许一直使用才不会忘记。
忘记开始时是暂时的，如果后来又用上了，翻翻资料就恢复记忆了 马黑黑 发表于 2026-7-22 19:27
忘记开始时是暂时的，如果后来又用上了，翻翻资料就恢复记忆了
没那么简单吧，有的时候连资料都找不到啊。 红影 发表于 2026-7-22 22:00
没那么简单吧，有的时候连资料都找不到啊。
这种情况极为罕见。在AI可以当高级搜索使用的年代，几乎没有自己接触过的知识找不到资料的。 马黑黑 发表于 2026-7-22 22:16
这种情况极为罕见。在AI可以当高级搜索使用的年代，几乎没有自己接触过的知识找不到资料的。
好吧，你提到AI ，有它的帮助应该是没什么资料是找不到的{:4_173:} 红影 发表于 2026-7-23 22:32
好吧，你提到AI ，有它的帮助应该是没什么资料是找不到的
不过不要过度依赖AI，AI并非全能，我碰上很多AI搞不清楚的，然后提出质疑，它马上就会更正，会这么说：你说得对……你的验证非常及时……你的观察很敏锐……刚才我…… 马黑黑 发表于 2026-7-24 19:53
不过不要过度依赖AI，AI并非全能，我碰上很多AI搞不清楚的，然后提出质疑，它马上就会更正，会这么说：你 ...
看样子AI 在被使用的同时，也在同步提升自己啊。 红影 发表于 2026-7-24 23:41
看样子AI 在被使用的同时，也在同步提升自己啊。
应该酱紫 马黑黑 发表于 2026-7-25 20:58
应该酱紫
一直提升到超越人类。 红影 发表于 2026-7-25 22:55
一直提升到超越人类。
要得 马黑黑 发表于 2026-7-26 00:00
要得
有了它以后人类什么都不用操心了。
页:
[1]
2