Question

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

<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做什么？

提前致谢！

Answer 1

设置dominant-baseline应该为您提供所需的内容，可能是dominant-baseline="hanging"，以便文本位置基于文本的顶部而不是基线。

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

Answer 2

您还可以在em和y - 属性中使用dy！

至少解决了我的问题：

＆＃13;

<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>

＆＃13;

HTML5 SVG - 文本定位

2 个答案: