javascript - 给定 viewBox 尺寸和文本样式，如何计算将 svg 文本放入 viewBox 中的翻译？

Question

我试图理解<text>在 svg 中定位。

假设你有<svg viewBox="..."><text>...</text></svg> ，其中 viewBox 的大小正确，以适合给定(已知)字体、字体粗细和字体大小的文本。没有给出<text>一个x="..." y="..."翻译后，它不会在 viewBox 中“正确”定位:它会太高，并且有点偏右。

我可以计算一下那些x和y翻译值？这可能不需要分析绘制的 <text>如果它翻译不依赖于字体的特征，或分析绘制的 <text>如果确实取决于字体的特性。

这是一个示例(也是一个 jsfiddle: https://jsfiddle.net/enry/Lnzxx0jx/ )。这是从 Sketch 导出的 - 这就是为什么我无法访问 x 和 y 转换中的计算。 <svg>就是红色轮廓的东西。需要注意的是，需要这些特定的 x 和 y 平移值来将文本定位在 viewBox 中，如果 <svg>的溢出隐藏了整个 <text>可见。

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
/* just for demo purposes */
html {
    padding: 20px;
    background: #ccc
}
svg {
    outline: 1px solid red;
    background: #fff;
    overflow: hidden /* in case you want to play around with the translation */
}

translated
<svg viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text x="-2" y="26"><!-- << the question:
                                if these values weren't provided,
                                how would you calculate them? -->
        my sample text
    </text>
</svg>

not translated
<svg viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text><!--                  fwiw, the getBBox of the text without translation is
                                somewhere around -33 - -34, depending on the svg's actual size-->
        my sample text
    </text>
</svg>

那么为什么平移值 x="-2"和 y="26"呢？我尝试过不同百分比的 viewBox 尺寸；字体大小的各种百分比；以及将 viewBox 与字体大小相关的分数……但无法弄清楚。

它们可能依赖于 kerning和 leading — 字母周围的空间。在这种情况下，我想我们直到绘制之后才能知道必要的翻译，此时也许可以使用 js/jquery 来测量字符周围的空间？如果是这样，这将如何完成(我没有任何使用脚本来分析打印字符的经验)。 Fwiw(这是在讨论中提出的)，未翻译文本的 getBBox 是 x:0, y:-[非常接近 34，取决于 svg 的实际大小] - 所以，y 非常接近 -(viewBox y)。因为 getBBox 不需要 svg 来拥有 viewBox，所以这可以用来动态确定 viewBox y...但它似乎对平移计算没有帮助。

或者是基于viewBox的一些计算？在我的实验中，翻译值取决于字体和字体大小......但viewBox也是如此，所以也许viewBox尺寸就是我们计算翻译所需的全部。

我的猜测:字距调整对于 x 翻译来说是有意义的 - 我可以想象 svg 会被前导空白绊倒，这可以解释为什么它必须向左拉一点。 y 平移的一部分是将基线向下移动到 viewBox 的底部，但考虑到 x 必须平移，我预计 y 是基线加上一些调整...这需要计算调整(可能是前导？)和文本高度(大写高度 + 可能的上升高度 + 可能的下降高度 - [ "typeface anatomy" illustration ])

Answer 1

您的问题令人困惑，因为我们希望您(比互联网上随机的陌生人)更清楚答案是什么。

My real question is where x="-2" and y="25" came from.

这就像问为什么一本书是蓝色的，或者为什么它在书架的左端。它之所以存在，是因为那是您或任何设计 SVG 的人放置它的地方。

如果您还不清楚的话，SVG 不是 HTML。事物不会像 HTML 中那样自动定位。您必须指定 SVG 文档中元素的位置和大小。

如果您想知道为什么文本位于该位置，请询问设计师。

我的猜测

..如果您采用给定的文本并将其大小设置为 36px，将其字体设置为“Proxima Nova”，并将其放置在页面的左上角，那么:

1. 其右下角位于 (241,33)
2. 文本基线起始位置将为 (-2,25)

从而解释生成的文本 x,y 坐标和 viewBox 值。

但是我没有那种字体，所以我不能确定。

更新

如果您需要在浏览器中重新定位文本，您可以在某个初始位置和字体大小处添加文本。然后在文本元素上调用 getBBox()。这将为您提供相对于初始文本位置的文本边界。在此基础上，您可以计算出最终的位置和大小。如果需要，您还可以修改 viewBox，以便正确缩放文本。

// Find the text element
var mytext = document.getElementById("mytext");

// Get it's bounding box
var bbox = mytext.getBBox();

// Reposition text using the values from its bounding box
mytext.setAttribute("x", -bbox.x);
mytext.setAttribute("y", -bbox.y);
// Top left of text should now be at top-left of SVG (0,0)

// Now update the SVG viewBox so that it is fitted to the text
document.getElementById("mysvg").setAttribute("viewBox", "0 0 "+bbox.width+" "+bbox.height);

// Note that the bbox of the text is not tightly fitted to the text.  It includes the em boxes 

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
/* just for demo purposes */
html {
    padding: 20px;
    background: #ccc
}
svg {
    outline: 1px solid red;
    background: #fff;
    overflow: hidden /* in case you want to play around with the translation */
}

<svg id="mysvg" viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text id="mytext" x="0" y="0">my sample text</text>
</svg>

在上面的示例中，我们正在移动文本位置。但我们真的不需要。仅设置 viewBox 将具有相同的结果。

// Find the text element
var mytext = document.getElementById("mytext");

// Get it's bounding box
var bbox = mytext.getBBox();

// Now update the SVG viewBox so that it is fitted to the text
document.getElementById("mysvg").setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height].join(' '));

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
/* just for demo purposes */
html {
    padding: 20px;
    background: #ccc
}
svg {
    outline: 1px solid red;
    background: #fff;
    overflow: hidden /* in case you want to play around with the translation */
}

<svg id="mysvg" viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text id="mytext" x="0" y="0">my sample text</text>
</svg>