0

Web ページをレスポンシブにするために、グラフィックと div を SVG 画像に移行しました。現在、画像自体はすべてのブラウザで正常に動作します。しかし、動的に塗りつぶされたテキスト パッセージも、要素<text>と<tspan>要素を使用して SVG に移行しました。さまざまなブラウザー開発者ツールでエミュレートすると、すべて機能し、値が更新され、すべてのスケールが適切に調整されます。

しかし、グループ化されたテキストの整列に関しては、ブラウザーの動作が異なり、頭痛の種になります。2 列の値が必要です。右の列は右に配置し、右の列は左に配置する必要があります。これを達成するためtext-anchor="end"に、左のグループの値を使用しました。そのグループは、さまざまなブラウザーで問題を引き起こします。

インデントされた読み取り可能で編集可能な (IMHO) コードを使用すると、Chrome と Firefox は最初の 2 行を 1 ノッチ左に移動し (または最後の行を右に移動しますか?)、IE/Edge はすべて一列に表示されます。

FF/Chrome 左 - IE/Edge 右

<tspan>要素内の要素のコードを<text>完全にインライン FF で記述すると、Chrome はそれをすべてうまく表示しますが、今回は IE/Edge が最後の行を左にインデントします。

IE は左にインデントします

フィドルで問題を再現できました: https://jsfiddle.net/bL16wv3z/12/

Chrome と FF では右の列が適切に配置され、IE/Edge では左の列が適切に配置されて表示されます。

フィドルで使用されるコード例:

<div id="svgContainer">
   <svg viewBox="0 0 923 500">
      <g transform="translate(50,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
            <tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan>
            <tspan dy="1.2em" x="5">B</tspan>
            <tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>

      <g transform="translate(150,5)">
         <text text-anchor="end">
            <tspan></tspan>???</tspan><tspan dy="1.2em" x="0">???</tspan><tspan dy="1.2em" x="0">???</tspan>
         </text>
         <text dx="5">
            <tspan>A</tspan><tspan dy="1.2em" x="5">B</tspan><tspan dy="1.2em" x="5">C</tspan>
         </text>
      </g>
   </svg>
</div>

では、すべてのブラウザで整列を機能させるにはどうすればよいですか、それとも書式設定/配置に何か不足していますか?

前もって感謝します

4

0 に答える 0