SVG tspans与text-anchor ="end"不对齐的问题. [英] Issue with SVG tspans not aligning with text-anchor="end"

问题描述

我有一些这样的代码:

svg {font-family:Verdana,sans-serif;color:#000;}
.key    {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt     {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270)   blue    */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150)   green   */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30)   red */
.yel    {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non    {fill:none;}
.rec    {stroke:#000;stroke-width:1;}

<svg class="key" x="631.5" y="253.5" width="69" height="69">
    <rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
    <text class="caphgh" x="2.5" y="16.5">K</text>
    <text class="keynor" x="2.5" y="22.5">
        <tspan x="2.5" dy="14">Next</tspan>
        <tspan x="2.5" dy="14">Near</tspan>
        <tspan x="2.5" dy="14">Friend</tspan>
    </text>
    <text class="keysub" y="0.5">
        <tspan class="keyshf" x="68.5" dy="12">Base</tspan>
        <tspan class="keyctl" x="68.5" dy="12">Plant</tspan>
        <tspan class="keyalt" x="68.5" dy="12">Jump</tspan>
    </text>
</svg>

问题出在最后三个tspan.它们都是右对齐的，但是在Chrome和Firefox中，这三个的最后一个比前两个更靠近右边缘.在IE 11中不会发生这种情况.

The problem is with the last three tspans. They are all right-aligned, but in Chrome and Firefox the last of the three is closer to the right edge than the first two. In IE 11 this does not happen.

有人可以告诉我原因吗?这是屏幕截图:

Can anyone tell me what the cause might be? Here is a screenshot:

谢谢！

推荐答案

这是由XML中<tspan>元素之间的空格引起的.如果我们将其删除，您的问题就会消失.

This is caused by the whitespace in your XML between the <tspan> elements. If we remove that, your problem disappears.

svg {font-family:Verdana,sans-serif;color:#000;}
.key    {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt     {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270)   blue    */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150)   green   */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30)   red */
.yel    {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non    {fill:none;}
.rec    {stroke:#000;stroke-width:1;}

<svg class="key" x="631.5" y="253.5" width="69" height="69">
    <rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
    <text class="caphgh" x="2.5" y="16.5">K</text>
    <text class="keynor" x="2.5" y="22.5">
        <tspan x="2.5" dy="14">Next</tspan>
        <tspan x="2.5" dy="14">Near</tspan>
        <tspan x="2.5" dy="14">Friend</tspan>
    </text>
    <text class="keysub" y="0.5">
        <tspan class="keyshf" x="68.5" dy="12">Base</tspan><tspan
               class="keyctl" x="68.5" dy="12">Plant</tspan><tspan
               class="keyalt" x="68.5" dy="12">Jump</tspan>
    </text>
</svg>

这可能有点不直观，但是当您在<tspan>元素中设置text-anchor: end时，它将覆盖所有文本，直到您更改文本位置.当您更改x和dy时，会在下一个<tspan>元素上发生这种情况.这样跨度之间的多余空间将成为先前<tspan>的一部分.因此，您的第一行文字实际上是:

It may be a little unintuitive, but when you set text-anchor: end in the <tspan> elements, it covers all the text up until you change the text position. That happens at the next <tspan> element, when you change x and dy. So that extra space in between the spans becomes part of the previous <tspan>. So your first line of text is actually:

<tspan>Jump</tspan>{spaces}

这就是为什么该文本似乎向左移动一个空格的原因.

That's why that text appears to be shifted left by a space.

请注意，SVG文档中的默认空白行为是将连续的空格折叠为单个空格.

Note that the default whitespace behaviour in SVG documents is to collapse consecutive spaces down to a single space.

在您的示例中，您实际上并不需要使用<tspan>.仅使用<text>元素会更简单，更干净.

You don't really need to be using <tspan> in your example. It would be simpler and cleaner just to use <text> elements.

svg {font-family:Verdana,sans-serif;color:#000;}
.key    {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt     {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270)   blue    */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150)   green   */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30)   red */
.yel    {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non    {fill:none;}
.rec    {stroke:#000;stroke-width:1;}

<svg class="key" x="631.5" y="253.5" width="69" height="69">
    <rect class="rec yel" x="0.5" y="0.5" rx="4" ry="4" width="68" height="68"/>
    <text class="caphgh" x="2.5" y="16.5">K</text>

    <g class="keynor">
        <text x="2.5" y="22.5" dy="14">Next</text>
        <text x="2.5" y="22.5" dy="28">Near</text>
        <text x="2.5" y="22.5" dy="42">Friend</text>
    </g>

    <g class="keysub">
        <text class="keyshf" x="68.5" y="0.5" dy="12">Base</text>
        <text class="keyctl" x="68.5" y="0.5" dy="24">Plant</text>
        <text class="keyalt" x="68.5" y="0.5" dy="36">Jump</text>
    </g>
</svg>

这篇关于SVG tspans与text-anchor ="end"不对齐的问题.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！