html – 如何使用％均匀地扩展内联SVG

发布时间：2020-12-14 18:37:23 所属栏目：资源来源：网络整理

导读：我正在尝试在流体上下文中使用SVG元素,使用％units来设置与容器成比例的大小. 如果您包含像图像一样的SVG设计,它就像图像一样： img class="img-svg" src="box.svg" / 您可以使用CSS轻松地按比例缩放它,如下所示： .img-svg { width:100%; height: auto; }

我正在尝试在流体上下文中使用SVG元素,使用％units来设置与容器成比例的大小.

如果您包含像图像一样的SVG设计,它就像图像一样：

<img class="img-svg" src="box.svg" />

您可以使用CSS轻松地按比例缩放它,如下所示：

.img-svg { width:100%; height: auto; }

但

如果您使用内联SVG,一切都会改变……

<svg class="inline-svg" preserveAspectRatio="xMidYMid meet" viewBox="...">
    ...
</svg>

这不会起作用：

.inline-svg { display:block; width:100%; height: auto; }

如果你这样做,它会将SVG的盒子扩展到100％,但它内部的所有元素都将保持相同的大小.这是一个jsfiddle：http://jsfiddle.net/s_d_p/jA62R/

正确的方法是什么,以便SVG中的内容统一向上/向下扩展？

注1：我正在寻找一个CSS / SVG解决方案.不是javascript hack.

NOte2：我发现了this,但它依赖于固定的px单位.

解决方法

我仍然对此敏感,但这是迄今为止我提出的最好的……

CSS

.svg {
    display: block;
    width:100%;
    height: auto;
}

SVG

<svg preserveAspectRatio="xMidYMid meet" viewBox="...">
...
</svg>

CSS需要将显示设置为阻止,因为SVG的默认值是内联的(不确定原因).然后你可以像div一样缩放它的边界.

使得包含的svg节点可以很好地播放的方式也是使用preserveAspectRatio属性.正如Robert在上面的注释中指出的那样,如果你没有viewBox属性,那么preserveAspectRatio属性也不起作用.

值得在这里阅读更多关于preserveAspectRatio的内容,因为如果尺寸不同,那么如果不同的值将决定缩放元素如何与周围空间相互作用,那么会有很多.例如,如果您的SVG是一个短的宽矩形,并且您的容器是一个高瘦的矩形,那么浏览器应该使用额外的空间来使其适合？

[小心！ preserveAspectRatio的浏览器默认值差异很大！]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!