HTML5 SVG - 文本定位答案

【问题标题】：HTML5 SVG - Text PositioningHTML5 SVG - 文本定位
【发布时间】：2015-03-09 09:07:19
【问题描述】：

我试图通过给它一个上边距来定位 HTML5 SVG 中的 <text> 元素。比如说，我希望 <text> 元素的上边距为 10 像素。这不起作用：

<svg style="height: 100px; border: 1px solid black">
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial">
        <tspan>The quick brown fox jumps over the lazy dog</tspan>
    </text>    
</svg>

问题在于，对于 SVG 文本元素，y 距离是从文本的底线开始测量的，而不是从顶部开始。此代码生成的文本只有较低的 10px 可见。因此，我们必须将font-size 值添加到y 值中才能获得正确的边距：

<svg style="height: 100px; border: 1px solid black">
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial">
        <tspan>The quick brown fox jumps over the lazy dog</tspan>
    </text>    
</svg>

至少，我是这么认为的。但这也不起作用。现在，上边距太大了，正如您在小提琴中看到的那样：http://jsfiddle.net/yy8gS/2/。我希望上边距与左边距相同，显然不是这样。事实上，y 的值 48 看起来差不多，但我不知道为什么，也不知道如何为任意边距和字体大小计算这个值。在我看来，font-size 值不是 SVG 用于定位的实际文本高度值。

谁能帮我解决这个问题？我正在尝试使用 SVG 做的事情吗？

提前致谢！

【问题讨论】：

标签： html svg

【解决方案1】：

设置dominant-baseline 应该可以满足您的需求，也许是dominant-baseline="hanging"，以便文本位置基于文本顶部而不是基线。

如果您想知道字体的高度，那么您应该调用getExtentOfChar 来确定它，而不是假设您得到的字体的字体大小正是您所要求的。

【讨论】：

dominant-baseline: hanging;
文本 { 主要基线：文本前边缘； }
我喜欢这个解决方案，但是我发现 Safari 还不支持它。

【解决方案2】：

您也可以在y 和dy-attributes 中使用em！

这至少解决了我的问题：

<div>
  <p>working: margin as y-value:</p>
  <svg style="height: 100px; border: 1px solid black">
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial">
      <tspan>The quick brown fox jumps over the lazy dog</tspan>
    </text>    
  </svg>
</div>

【讨论】：