17

我试图<text>通过给它一个上边距来定位 HTML5 SVG 中的元素。比方说，我希望<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/。我希望上边距与左边距相同，显然不是这样。事实上，y48 的值看起来是正确的，但我不知道为什么，或者我如何计算任意边距和字体大小的这个值。在我看来，该font-size值不是 SVG 用于定位的实际文本高度值。

有人可以帮我吗？我正在尝试用 SVG 做些什么吗？

提前致谢！

4

2 回答 2

27

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

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

于 2013-09-02T11:06:49.207 回答
8

您还可以使用em's iny和dy-attributes！

这至少解决了我的问题： 

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

于 2015-03-09T01:07:19.137 回答