HTML中的内联SVG - 相同的字体大小渲染得更大

时间:2017-06-17 13:45:11

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

我刚刚开始阅读SVG Essentials本书,在示例2-2中我不明白。 "在HTML文件中内联SVG"。

" Look Ma,相同字体的字体大小!"文本大于"这里再次是常规HTML ...",两者的样式相同,实际上没有样式并使用默认值。这是示例中的代码(也是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>

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

2 个答案:

答案 0 :(得分:2)

viewBox有效地将内容的大小加倍。可见区域为500 x 500像素(在CSS中设置),但您要将250 x 250单位区域放大到500 x 500像素的盒子中。

答案 1 :(得分:0)

嗯,我应该继续阅读下一章,显然。

答案是&#34; 视口的用户坐标&#34; - 这些会影响SVG的呈现方式。特别是将 viewBox 设置为SVG 视口的一半会使图像看起来大两倍......