使用CSS更改SVG视口大小

Question

问题： 有没有一种方法可以使用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" 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>

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

- Geoffrey Burdett

---

找这个吗？http://jsfiddle.net/hT9Jb/2/ - Kheema Pandey

这可能与此相关：http://stackoverflow.com/questions/23073219/automatically-scaling-svg-at-time-of-creation - pmagunia

@KheemaPandey 我希望 div 符合 svg，而不是相反的情况（并且你给我的 fiddle 没有保留 viewbox 的纵横比）。 - Geoffrey Burdett

@Sisyphus 这都是在服务器端完成的，但这确实给了我一个 JavaScript 的想法。 - Geoffrey Burdett

Answer 1

你可以使用一个transform：

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

- pruhter

---

这在我看来是最好的解决方案。 - catch22

这不会改变视框，只会改变比例尺。改变视框会裁剪SVG，而不是缩放它。 - kainaw

这对我没有任何帮助。 - muz the axe

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

这不是一个好的解决方案，因为它会在 SVG 周围留下空白。 - Saeed Neamati

Answer 2

我还没有找到一种可以使用CSS更改viewBox属性的方法。但是，这个JavaScript解决方案效果很好：

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

同时从SVG中删除任何对宽度和高度的引用，并在CSS中设置它们。虽然你正在使用SVG，但它是内联的，因此会应用级联规则。

- sansSpoon

---

这个方案非常有效。我认为没有 CSS 解决方案，但是这个 JavaScript 选项完全满足了需求。 - Clyde Thomas

肯定有一个CSS解决方案，使用transform: scale(X.XX)。 - T.Woody

如果你有疑问viewBox上的数字是什么意思，这里是viewBox = x y 宽度 高度。 - Dexter

Answer 3

为了使SVG灵活，可以更改其宽度和高度，需要完全删除宽度和高度，并使用viewbox进行操作。与sansSpoon所说的相反，这并不需要javascript。在CSS中引用SVG并定义其最大宽度和最大高度，例如：

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

}

之后，您的SVG将具有弹性，并且同时将尊重您之前定义的最大宽度和高度。

- Paulo Coghi

---

如果你要缩放一个宽度为250像素和高度为400像素的东西，第二行应该是max-height。或者反过来，这取决于缩放的要求。我已经编辑过了，请检查。 - Nodira

这是最好的答案！ - Skratt

这似乎可以让你更像处理图像一样处理svg。这里有一篇很好的文章：https://css-tricks.com/scale-svg/。看起来viewBox设置了宽高比，这允许您使用CSS更改（缩放）大小。使用d3创建svg： .attr("viewBox", "0 0 " + w + " " + h + "") 然后使用一些CSS： .svg { width: 10%; height: auto; } 或者您可以缩放周围的<div>。 - Martin Harvey

您可以在此处尝试 Codepen：https://codepen.io/martin-harvey/pen/RwpgdpY。更改＃graph和.svg的CSS，以缩放svg并保持纵横比。要修改CodePen，请点击Change View>Editor View。 - Martin Harvey

Answer 4

你试过以下方法吗：

preserveAspectRatio='xMinYMin'

请查看这个示例http://jsfiddle.net/hT9Jb/3/

更多详细信息，请参阅mozila关于svg的文档

- Danyu

---

是的...preserveAspectRatio 保留了 SVG 在视口内的纵横比，但不保留视口的纵横比。 - Geoffrey Burdett

这并没有解决我的问题。不过还是谢谢你。有趣。 - Steve Tomlin

Answer 5

你的SVG文件中指定的宽度和高度值是问题的原因。

解决方法是修复你的SVG文件。更改:

width="250px" height="400px"

为了

width="100%" height="100%"

或者使用CSS：

width: 100%;
height: 100%; 

- Paul LeBeau

---

我明白问题是关于设置源SVG周围的CSS值，而不是创建具有略有不同值的数十个SVG文件。 - muz the axe

Answer 6

在@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
}

- Skratt

Answer 7

    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">

这应该可以工作。

- Debu Shinobi

---

preserveAspectRatio 对我有用，谢谢。 - Floris

Answer 8

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

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

- Sasha Shpota

Answer 9

我发现了一个简单的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);
}

- Geoffrey Burdett