我想在 HTML 页面中嵌入一些 SVG,以便在调整页面大小时自动调整大小(使用 SVG、CSS 或 JS),同时仍保留原始纵横比。
例如,使用 W3School 的示例:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
是否可以将 SVG 宽度设置为窗口宽度的 5%,并按比例缩放高度?
我尝试了一些东西,包括 preserveAspectRatio="xMinYMin meet"
并在 <div>
内将尺寸设置为 100%容器,但还没有让它工作。
有什么建议吗?
最佳答案
您的 SVG 根元素需要一个 viewBox
属性,它将定义 SVG 图像的整体大小:
<svg version="1.1" viewBox="0 0 300 185">
现在您可以通过 CSS 设置图像的宽度或高度,它会完美缩放。
关于html - 在调整窗口大小时自动缩放嵌入在 HTML 中的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16078088/