我刚刚开始阅读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>
任何想法我在这里缺少什么?
答案 0 :(得分:2)
viewBox有效地将内容的大小加倍。可见区域为500 x 500像素(在CSS中设置),但您要将250 x 250单位区域放大到500 x 500像素的盒子中。
答案 1 :(得分:0)
嗯,我应该继续阅读下一章,显然。
答案是&#34; 视口的用户坐标&#34; - 这些会影响SVG的呈现方式。特别是将 viewBox 设置为SVG 视口的一半会使图像看起来大两倍......