HTML 中的内联 SVG - 相同的字体大小呈现更大答案

【问题标题】：Inline SVG in HTML - same font-size rendered biggerHTML 中的内联 SVG - 相同的字体大小呈现更大
【发布时间】：2017-06-17 22:06:31
【问题描述】：

我刚开始阅读SVG Essentials 的书，示例 2-2 中有一些我不明白的地方。 “HTML 文件中的内联 SVG”。

“Look Ma，Same Font！”的字体大小text 大于“And here is regular HTML again...”，虽然两者的样式相同，但实际上没有样式并使用默认值。这是示例中的代码（也是see here）：

<head>
    <style>
        svg {
          display:block;
          width:500px;
          height:500px;
          margin: auto;
          border: thick double navy;
          background-color: lightblue;
        }
        body {
          font-family: cursive;
        }
        circle {
          fill: lavender;
          stroke: navy;
          stroke-width: 5;
        }
        </style>
    </head>
    <body>
        <h1>Inline SVG in HTML Demo Page</h1>
        <svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
            <title>An SVG circle</title>
            <circle cx="125" cy="125" r="100"/>
            <text x="125" y="125" dy="0.5em" text-anchor="middle">Look Ma, Same Font!</text>
        </svg>
        <p>And here is regular HTML again...</p>
    </body>
</html>

任何想法我在这里缺少什么？

【问题讨论】：

标签： html css svg font-size inline-svg

【解决方案1】：

viewBox 有效地将内容的大小加倍。可见区域为 500 x 500 像素（在 CSS 中设置），但您将 250 x 250 单位区域放大到 500 x 500 像素的框内。

【讨论】：

【解决方案2】：

好吧，显然我应该一直读完下一章。

答案是“视口的用户坐标”——这些会影响 SVG 的呈现方式。具体来说，将 viewBox 设置为 SVG viewport 的一半会使图像看起来大两倍...

【讨论】：