这是我的代码：
<!DOCTYPE html>
<html>
<body>
<div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
<circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
</body>
</html>
我得到的 SVG 计算尺寸为 1000 X 500，但 DIV 的计算尺寸为 1264 X 504。
DIV 的宽度 - 1264px 是页面的宽度，因为它以 100% 的形式提供，即可以理解，但为什么高度是 504px，而 SVG 高度是 500px？
提前致谢。
这是因为<svg>是一个内联元素 - 将其设置为display: block;将消除这些影响，例如由行高引起的。
svg {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
<svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
<circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
