使用 CSS 更改 SVG Viewbox 大小答案

【问题标题】：Change SVG Viewbox size with CSS使用 CSS 更改 SVG Viewbox 大小
【发布时间】：2014-08-19 05:29:57
【问题描述】：

问题：有没有办法用 CSS 改变 SVG 视图框的大小，但保留纵横比？或者是否有另一种方法可以在没有视图框的情况下保持 SVG 的纵横比。

问题：我想响应地调整 SVG 的大小，但保持纵横比。视图框的宽度随页面调整，但高度不随宽度调整。问题在于容器 div 的高度取决于视图框的高度。因此，即使视图框的下半部分没有显示任何内容，容器 div 也可能非常高。

<style>
    div{
        width: 100%;
        height: 500px;
        background-color: #00ffff;
    }

    svg{
        width: 50%;
        background-color: #ffff00;
    }
</style>

<div>
    <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>
</div>

（对象 SVG 和 img SVG 不适用于我的目的。它必须是内联的。解决方案不一定是 CSS...javascript 绝对是一个可以接受的解决方案。）

【问题讨论】：

寻找这个？ jsfiddle.net/hT9Jb/2
这可能是相关的：stackoverflow.com/questions/23073219/…
@KheemaPandey 我希望 div 符合 svg，而不是相反（你给我的小提琴不会保留视图框的纵横比）
@Sisyphus 这就是服务器端，但它确实给了我一个 javascript 的想法。

标签： css svg

【解决方案1】：

以@Paulo Coghi 上的答案为基础，这对我来说是最好的答案（在几个小时的失败测试和无用的谷歌搜索之后拯救了我：

只需将您的 svg 转换为：

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>

进入：

<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
    <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    // and/or whatever you want
</svg>

然后你可以在你的 CSS 中使用：

svg {
    max-width: 100%;
    max-height: 100%;
    // or any other units or measurements you want
}

【讨论】：

【解决方案2】：

    svg{
        width: 50%;
        background-color: #000;
    }

 <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin" preserveAspectRatio="none">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>

只需使用它，看看它是否有效（对我有用）。

<svg .... .... ...  preserveAspectRatio="none">

这应该可行。

【讨论】：

【解决方案3】：

帮助我的是在img 标签上设置height 和width：

<img src="./logo.svg" height="150px" width="150px"/>

【讨论】：

【解决方案4】：

为了拥有一个灵活的 SVG，允许您更改其宽度和高度，您需要完全删除宽度和高度，并改用viewbox。

而且，与 sansSpoon 所说的相反，您不需要 javascript 来执行此操作。

在您的 css 中，参考您的 svg 并定义其 max-width 和 max-height，例如：

.my_svg_element {
    max-width: 250px;
    max-height: 400px;

}

之后，您的 SVG 将具有弹性，同时将遵循您之前定义的最大宽度和高度。

【讨论】：

如果您要缩放 250px 宽度和 400px 之类的东西，第二行应该是 max-height。反之亦然，这取决于缩放要求。我编辑了，请检查。
这是最好的答案！
这似乎有效，让您将 svg 更像是 img。这里有一篇很好的文章：css-tricks.com/scale-svg。似乎 viewBox 设置了纵横比，并允许您使用 CSS 更改（缩放）大小。使用 d3 创建 svg： .attr("viewBox", "0 0 " + w + " " + h + "") 然后是一些带有 .svg { width: 10%; 的 CSS高度：自动； } 或者你可以缩放周围的
您可以在此处尝试使用 codepen：codepen.io/martin-harvey/pen/RwpgdpY。更改 #graph 和 .svg 的 CSS 以在保持纵横比的同时缩放 svg。要修改 CodePen，请点击更改视图 > 编辑器视图。