SVG 文本元素的长度计算差异

Question

我正在使用 svg 箱子创建 SVG。为了在 <text> 元素周围正确放置边框，我使用 rusttype crate 预先计算了文本的长度。

但是，我的浏览器 (Safari) 似乎以不同的长度呈现文本。

我的 SVG 的简化版本在这里：

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M105,20 L304,20 L304,77 L105,77 z" fill="none" stroke="black" stroke-width="1"/>
<text font-family="Arial" font-size="12" x="110" y="57">My extremely very, very, very, long Goal</text>
</g>
</svg>

我确实按照建议计算了长度here:

pub fn text_bounding_box(font: &Font, text: &str, size: f32) -> (u32, u32) {
    let scale = rusttype::Scale::uniform(size);
    let width = font
        .layout(text, scale, rusttype::point(0.0, 0.0))
        .last()
        .map(|g| g.pixel_bounding_box().unwrap().max.x)
        .unwrap_or(0);

    let v_metrics = font.v_metrics(scale);
    let height = (v_metrics.ascent - v_metrics.descent).ceil() + v_metrics.line_gap;

    (width as u32, height as u32)
}

我确保在这两种情况下使用的字体都是 Arial（当我计算它时，对于 SVG）。至少，我是这么认为的。

我的计算得出长度为 189px。使用 Safari 检查 SVG 时，我看到 ~213.14px.

的宽度

欢迎提出任何建议。我找到了在 SVG 中放置 textLength 属性的解决方法，但我至少想了解其中的差异。提前致谢。

编辑： 没有 textLength 属性的渲染 SVG：

使用计算出的 textLength 属性呈现的 SVG：

Answer 1

两个不同 libraries/engines.

中的测量文本之间存在差异的可能原因有多种

字距调整差异
连字处理差异
On-screen 字体渲染器经常调整字形位置以更好地与屏幕像素对齐。特别是对于小字体。
还有其他潜在的 font-specific 功能和变化可能会影响渲染

很有可能是#3。尝试将字体大小设置为较大的值（例如 100）以查看是否属于这种情况。您也可以尝试使用 CSS text-rendering 属性.

SVG 文本元素的长度计算差异

Difference in length calculation for SVG text element

svg

rust

fonts