svg文本对齐演示
本帖最后由 马黑黑 于 2024-9-27 12:48 编辑 <br /><br /><style>.wrapbox { margin: auto; }
.fieldsetwrap { display: flex; gap: 12px; flex-direction: row; }
fieldset { min-width: 340px; }
svg { border: 1px solid gray; }
</style>
<div class="wrapbox">
<p>如下svg文本以中央十字虚线做参照，text标签以十字交叉点为原点，即 x="50%" y="50%"，页面初始状态文本对齐方式设置为 text-anchor="start" dominant-baseline="auto"，此为缺省或默认设置值，可以尝试更改对齐方式以便观察text标签的 text-anchor 和 dominant-baseline 属性的表现：</p>
<svg width="760" height="200">
<g fill="none" stroke="gray" stroke-width="1" stroke-dasharray="2">
<line x1="0" y1="50%" x2="100%" y2="50%" />
<line x1="50%" y1="0" x2="50%" y2="100%" />
</g>
<text id="svgtext" x="50%" y="50%" text-anchor="start" dominant-baseline="auto" fill="none" stroke="darkred" stroke-width="3" stroke-linejoin="round" font-family="'微软雅黑','黑体'" font-size="60" font-weight="bold">SVG文本对齐</text>
</svg>
<p>对齐设置：</p>
<div class="fieldsetwrap">
<fieldset>
<legend>text-anchor（水平对齐）：</legend>
<input type="radio" id="a1" name="anchor" value="start" checked />
<label for="a1">start</label><br>
<input type="radio" id="a2" name="anchor" value="middle" />
<label for="a2">middle</label><br>
<input type="radio" id="a3" name="anchor" value="end" />
<label for="a3">end</label>
</fieldset>
<fieldset>
<legend>dominant-baseline（垂直对齐）：</legend>
<input type="radio" id="b1" name="baseline" value="auto" checked />
<label for="b1">auto</label><br>
<input type="radio" id="b2" name="baseline" value="middle" />
<label for="b2">middle</label><br>
<input type="radio" id="b3" name="baseline" value="hanging" />
<label for="b3">hanging</label>
</fieldset>
</div>
<h2>【附】本页svg初始代码</h2>
<div class="hE"><pre id="svgcode"></pre></div>
</div>
<script>
var anchors = document.getElementsByName('anchor'),
baselines = document.getElementsByName('baseline'),
svg = document.querySelector('svg');
anchors.forEach(anchor => anchor.oninput = () => checking(anchor, 'text-anchor', svgtext));
baselines.forEach(baseline => baseline.oninput = () => checking(baseline, 'dominant-baseline', svgtext));
checking = (radio,attribute,target) => target.setAttribute(attribute, radio.value);
var outcode = svg.outerHTML.replaceAll('<','<');
outecode = outcode.replaceAll('>','>')
svgcode.innerHTML = outcode;
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
</script>
dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方式，要用 dy 或通过 y 属性调整。刚查了外文资料发现svg text标签可以使用这个属性。 腾讯云有一份 dominant-baseline 资料：
https://cloud.tencent.com/developer/section/1423913 弄两条参照线更直观了，可以更清楚地比较text-anchor和dominant-baseline不同选择时的样子了{:4_187:} 这横向竖向的三种对齐方式，都正好在中心参照线的两侧或当中呢，有意思{:4_187:} 马黑黑 发表于 2024-9-27 12:36
dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方 ...
黑黑威武，什么功能都能找到{:4_199:} 这个文本点代码能自动调整左右上下,为老师点赞！{:4_199:} 红影 发表于 2024-9-27 13:10
弄两条参照线更直观了，可以更清楚地比较text-anchor和dominant-baseline不同选择时的样子了
这里要注意一下 text 物理起始点坐标，但text标签又不像矩形那样 梦江南 发表于 2024-9-27 14:17
这个文本点代码能自动调整左右上下,为老师点赞！
{:4_190:} 红影 发表于 2024-9-27 13:15
黑黑威武，什么功能都能找到
这个在做圆环播放器的时候其实可能用到它，只是忘记了 马黑黑 发表于 2024-9-27 19:31
这里要注意一下 text 物理起始点坐标，但text标签又不像矩形那样
不管怎么说，看着居中了啊。 马黑黑 发表于 2024-9-27 19:32
这个在做圆环播放器的时候其实可能用到它，只是忘记了
哦，原来之前用过的啊{:4_204:} 红影 发表于 2024-9-27 19:49
哦，原来之前用过的啊
canvas画布中肯定用到过，svg应该也用到过。记得当时认为它是一个通用CSS属性。 红影 发表于 2024-9-27 19:48
不管怎么说，看着居中了啊。
主要是要能理解 马黑黑 发表于 2024-9-27 12:36
dominant-baseline 属性很多介绍svg文本的资料都没有提到，我还因此误以为svg文本不能设置垂直方向的对齐方 ...
老师也在不停的学习。。。榜样。。 马黑黑 发表于 2024-9-27 12:59
腾讯云有一份 dominant-baseline 资料：
https://cloud.tencent.com/developer/section/1423913
我点开看了一下的。。{:4_173:} 马黑黑 发表于 2024-9-27 20:06
canvas画布中肯定用到过，svg应该也用到过。记得当时认为它是一个通用CSS属性。
有个这样的过程，下次肯定知道了{:4_173:} 马黑黑 发表于 2024-9-27 20:06
主要是要能理解
嗯嗯，这是最主要的。{:4_204:} 进来学习一下 小辣椒 发表于 2024-9-27 21:40
进来学习一下
{:4_190:}