SVG 文本和矩形的相对大小答案

【问题标题】：relative sizes of SVG text and rectSVG 文本和矩形的相对大小
【发布时间】：2014-07-22 06:31:37
【问题描述】：

在向 SVG 元素添加属性（宽度、高度、视图框）时，是否有人能够解释矩形和文本的相对大小的变化？（在 Linux x86_64 上的 Firefox 30 中测试）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Test</title>
    <script src="jquery.js"></script>
    <script src="d3.js"></script>
</head>

<body>

    <svg>
    <g transform="translate(10, 10)">
        <rect fill="yellow" height="7.45em" width="29.4em"></rect>
        <text stroke="black">
            <tspan dy="1.69em" x="2.65em">PNUUUUUUUUU</tspan>
            <tspan dy="1.69em" x="2.65em">TEST TEST TEST TEST TEST</tspan>
            <tspan dy="1.69em" x="2.65em">EEE</tspan>
            <tspan dy="1.69em" x="2.65em">QQQ</tspan>
        </text>
    </g>
    </svg>
</body>

</html>

根据需要显示：

将 svg 元素更改为 <svg width="400px" height="300px">

或 <svg width="400px" height="300px" viewBox="0 0 400 300">

给出这个结果：

【问题讨论】：

这似乎与默认字体和大小有关。

标签： svg

【解决方案1】：

见：http://www.impressivewebs.com/understanding-em-units-css/

如果您没有在文档（css 或 html 文件）的任何位置设置字体大小，则“em”将与 Web 浏览器使用的字体大小相关。

在 google chrome 中，这是在以下设置中：网页内容 -> 字体大小。

【讨论】：

+1 链接提到 1em 不一定是 M 的宽度。根据示例文本中使用的字符，结果会有很大不同——尽管矩形的宽度随着文本的变化而保持不变。所以看起来 Firefox 实际上在做它认为正确的事情，尽管如果我将字体更改为固定宽度的字体（例如 Courier），矩形不会奇怪地改变大小。
最好在您的回答中加入一些此类信息并可能是一个示例