Question

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

根据需要显示：

enter image description here

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

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

给出了这个结果：

enter image description here

Answer 1

请参阅：http://www.impressivewebs.com/understanding-em-units-css/

如果未在文档（css或html文件）中的任何位置设置font-size，则“em”将相对于Web浏览器使用的字体大小。

在Google Chrome中，这位于以下设置中：网络内容 - ＆gt;字体大小。

SVG文本和rect的相对大小

1 个答案: