Question

为什么SVG矩形填充属性没有扩展矩形的高度？我可以用SVG标签中的height属性填充它，但随后失去了动态缩放矩形的功能。浏览器图像来自Firefox。提前致谢！

<!DOCTYPE html>
<html>
<head>
	<title>Test SVG Size</title>
</head>
<body>

  <svg
      version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

        <rect fill="green" x="0" y="0" width="100" height="200"></rect>
        <rect fill="yellow" x="100" y="0" width="100" height="200"></rect>
        <rect fill="red" x="200" y="0" width="100" height="200"></rect>


  </svg>

</body>
</html>

Answer 1

您需要将viewBox属性添加到SVG。 svg中3个矩形的总宽度为300个用户单位，高度为200。在这种情况下，viewBox="0 0 300 200"

  <svg viewBox="0 0 300 200"
      version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

        <rect fill="green" x="0" y="0" width="100" height="200"></rect>
        <rect fill="yellow" x="100" y="0" width="100" height="200"></rect>
        <rect fill="red" x="200" y="0" width="100" height="200"></rect>


  </svg>

SVG矩形填充问题

1 个答案: