HTML中的内联SVG -字体大小相同，显示更大
HTML中的内联SVG -字体大小相同，显示更大
提问于 2017-06-17 13:45:10
我刚开始读SVG要点的书，在例子2-2中有一些东西我不明白。“HTML文件中的内联SVG”。
字体大小“看妈，同样的字体！”文本比“这里又是普通的HTML .”更大，而两者的样式都是相同的，实际上没有-样式化，并且使用了默认值。这是示例中的代码(也是请看这里)：
<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
Stack Overflow用户
回答已采纳
发布于 2017-06-17 14:05:52
viewBox有效地使内容的大小加倍。可见区域是500 x 500 px (设置在CSS中)，但您正在将250 x 250单位区域扩展到该500 x 500 px框中。
Stack Overflow用户
发布于 2017-06-17 14:06:31
显然，我应该继续读下一章。
答案是“Viewport的用户坐标”--这些影响SVG的呈现方式。特别是将viewBox设置为SVG 视口的一半会使图像看起来大两倍.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44605352
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号