我正在尝试在流体上下文中使用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。
注意2:我发现了这个,但它依赖于固定的
px
单位。