大佬教程收集整理的这篇文章主要介绍了html – 如何使用％均匀地扩展内联SVG，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果您包含像图像一样的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.
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的浏览器默认值差异很大！]
以上是大佬教程为你收集整理的html – 如何使用％均匀地扩展内联SVG全部内容，希望文章能够帮你解决html – 如何使用％均匀地扩展内联SVG所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。