使用 CSS 更改 SVG Viewbox 大小

Posted 2023-03-06

【中文标题】使用 CSS 更改 SVG Viewbox 大小

【英文标题】：Change SVG Viewbox size with CSS

【发布时间】：2014-08-19 05:29:57

【问题描述】：

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

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

小提琴： http://jsfiddle.net/hT9Jb/1/

<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"   viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000"  />
    </svg>
</div>

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

【问题讨论】：

寻找这个？ jsfiddle.net/hT9Jb/2

这可能是相关的：***.com/questions/23073219/…

@KheemaPandey 我希望 div 符合 svg，而不是相反（你给我的小提琴不会保留视图框的纵横比）

@Sisyphus 这就是服务器端，但它确实给了我一个 javascript 的想法。

【参考方案1】：

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

只需将您的 svg 转换为：

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

进入：

<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
    <rect x="0" y="0" fill="#FF0000"  />
    // 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"   viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin" preserveAspectRatio="none">
        <rect x="0" y="0" fill="#FF0000"  />
    </svg>

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

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

这应该可行。

【参考方案3】：

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

<img src="./logo.svg"  />

【参考方案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，请点击更改视图 > 编辑器视图。

【参考方案5】：

您可以使用转换：

transform: scale(0.75); // 75% of original size

【讨论】：

这是imo这里最好的解决方案

这不会改变视图框。它改变了规模。更改视图框 CROPS SVG，它不会缩放它。

这对我没有任何作用

正如@kainaw 所说，这不是问题的解决方案 - 这会拉伸裁剪的 svg，它不会改变 viewBox 以显示更多内容或改变纵横比。

【参考方案6】：

SVG 中指定的宽度和高度值是导致问题的原因。

解决方案是修复您的 SVG 文件。变化：

到

或者使用 CSS：

width: 100%;
height: 100%; 

【讨论】：

我知道问题是关于围绕源 svg 设置 CSS 值。不创建几十个值略有不同的 svg 文件。

【参考方案7】：

我还没有找到用 CSS 更改 viewBox 属性的方法。然而，这个 Javascript 解决方案运行良好：

var mySVG = document.getElementById('svg');
mySVG.setAttribute("viewBox", "0 0 100 100");

同时从 SVG 中移除所有对宽度和高度的引用，并在 CSS 中设置它们。即使您使用的是 SVG，它也是内联的，因此应用了级联规则。

【讨论】：

这非常有效。我认为没有 CSS 解决方案，但这个 Javascript 选项完全满足了我们的需求。

肯定有transform: scale(X.XX)的css解决方案

【参考方案8】：

我找到了一个简单的 javascript 解决方案：

function setSvgSize()
    var width = document.getElementById('svg-container').offsetWidth;
    var x = parseInt( $('#svg').attr('width') );
    var y = parseInt( $('#svg').attr('height') );
    var height = (width / x) * y;
    $('#svg-container').css('height',height);

【参考方案9】：

你试过了吗：

preserveAspectRatio='xMinYMin'

检查这个例子http://jsfiddle.net/hT9Jb/3/

更多详情请见mozila documentation about svg

【讨论】：

是...preserveAspectRatio 保留视图框内 SVG 的纵横比，但不保留视图框的纵横比。

这并不能解决我的问题。不过谢谢。很有趣。