viewbox 属性在没有视口(viewport)(即提到的高度和宽度)的情况下是如何工作的，在这种情况下，它占用了所有可用的宽度，但我不明白为什么？
<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
</head>
<body>
<div>
<svg viewBox="0 0 800 600" style="border:1px solid #000;">
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" stroke="red" stroke-width="3"fill="none"></path>
<path d="M300,320 L540,320" id="middle" stroke="red"></path>
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(0, 635) scale(1, -1) " stroke="red" stroke-width="3" fill="none"></path>
</svg>
</div>
<script src="js.js"></script>
</body>
</html>
最佳答案
如果有viewBox svg element's如果缺少宽度和高度属性(或样式)，则使用 lacuna(默认)值。宽度和高度的空白值为 100%。
关于css - 无法理解 viewbox 如何与 svg 一起工作而不提及视口(viewport)，即高度和宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36002496/