0

为了使网页响应，我将图形和 div 迁移到 SVG 图像。imgae 本身现在在所有浏览器中运行良好。但我也将动态填充的文本段落迁移到带有<text>和<tspan>元素的 SVG。当使用不同的浏览器开发工具进行模拟时，这一切都有效，值被更新并且所有比例都可以。

但是在对齐分组文本时，浏览器的行为会有所不同，这让我很头疼。我想要两列值。右列应与右对齐，右列应与左对齐。为了实现这一点，我使用text-anchor="end"了左组值。该组导致不同浏览器出现问题。

当我使用缩进、可读和可编辑（恕我直言）代码时，Chrome 和 Firefox 将前两行向左移动一个槽口（或最后一行向右移动？），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