2

次のようなコードが少しあります。

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>

問題は、最後の 3 つの tspan にあります。それらはすべて右揃えですが、Chrome と Firefox では、3 つのうち最後のほうが最初の 2 つよりも右端に近くなっています。IE 11 では、これは発生しません。

誰が原因が何であるか教えてもらえますか? スクリーンショットは次のとおりです。

ここに画像の説明を入力

ありがとう！

4

1 に答える 1

4

<tspan>これは、要素間の XML の空白が原因です。それを取り除くと、問題はなくなります。

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>

少し直感に反するかもしれませんがtext-anchor: end、<tspan>要素を設定すると、テキストの位置を変更するまで、すべてのテキストがカバーされます。と を変更すると、次の<tspan>要素で発生します。そのため、スパン間の余分なスペースは前の. したがって、テキストの最初の行は実際には次のとおりです。xdy<tspan>

<tspan>Jump</tspan>{spaces}

そのため、そのテキストはスペースによって左にシフトされているように見えます。

SVG ドキュメントのデフォルトの空白の動作は、連続するスペースを 1 つのスペースにまとめることに注意してください。

あなたの例で実際に使用する必要はありません<tspan>。<text>要素を使用するだけで、よりシンプルでクリーンになります。

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>

于 2016-12-28T16:52:02.497 に答える