我用很多方法搜索了如何按中心对齐tspan
的集合,但是我还需要其他方法。我需要按中心对齐tspan
元素集,每个元素的左侧应与其他元素对齐。
我尝试再添加一个tspan
元素作为其他包装,并将其设置为text-anchor: middle
,但是它不起作用。
答案 0 :(得分:1)
为此,我将使用JavaScript将第一个tspan
的偏移量计算为两个tspan
元素之间的长度差的一半
let tspans = document.querySelectorAll("tspan");
let offset = (tspans[1].getComputedTextLength() - tspans[0].getComputedTextLength())/2
tspans[0].setAttributeNS(null,"dx", -offset)
svg {
border: solid 1px blue;
font-family: monospace;
}
<svg viewBox = "0 0 400 100">
<circle r="3" cx="200" cy="50" fill="red">
</circle>
<text y="50" text-anchor="middle"><!--
--><tspan x="200" >First label</tspan><!--
--><tspan x="200" dy="15">Second long long long label</tspan>
</text>
</svg>
答案 1 :(得分:0)
我的目的地目标是按中心对齐不同的tspan
组。我感谢@enxaneta的帮助。当我坚持一些有趣的子缺陷时,我发布了自己的答案。最后tspan
行未对齐。我看到了3或5像素的空间。这是由XML空间引起的。您需要删除tspan
元素之间的空格才能摆脱此问题。
let tspans = document.querySelectorAll("tspan");
let indexOfLongestRow = 0;
for(let i = 0; i < tspans.length; i++) {
if(tspans[indexOfLongestRow].getComputedTextLength() < tspans[i].getComputedTextLength()) {
indexOfLongestRow = i;
}
}
console.log(tspans[indexOfLongestRow]);
for(let i = 0; i < tspans.length; i++) {
let offset = (tspans[indexOfLongestRow].getComputedTextLength() - tspans[i].getComputedTextLength())/2;
console.log(offset);
tspans[i].setAttributeNS(null, "dx", -offset);
}
svg {
border: solid 1px blue;
font-family: monospace;
font-size: 9px;
}
<svg viewBox = "0 0 400 500">
<circle r="3" cx="200" cy="50" fill="red">
</circle>
<text y="50" text-anchor="middle">
<tspan x="200" dy="15">Second long long long label</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">First label</tspan><tspan x="200" dy="15">First label dfhdfhh</tspan><tspan x="200" dy="15">This is a longest label that i have here ergrtgrtgregregregerg</tspan><tspan x="200" dy="15">First label rth th rthththsrth</tspan><tspan x="200" dy="15">First label rthrth rthrt 5tyjey yejetyj tyjtyj teyjteyj</tspan><tspan x="200" dy="15">First label reghregregregregregrge</tspan></text>
</svg>