如何使用%均匀地扩展内联SVG

时间:2014-03-18 17:55:15

标签: html css svg

我尝试在流动的上下文中使用SVG元素,使用%单位设置与容器成比例的大小。

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

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

您可以使用CSS轻松按比例缩放它:

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

BUT

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

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

这个WON&#39; T工作:

.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单位。

2 个答案:

答案 0 :(得分:4)

我仍然在考虑这个问题,但这是迄今为止我提出的最好的......

CSS

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

SVG

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

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

所包含的svg节点如何正常播放 的方法是使用preserveAspectRatio属性。正如Robert在上面的评论中指出的那样,如果你没有viewBox属性,那么preserveAspectRatio属性也不起作用。

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

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

答案 1 :(得分:2)

您可以将svg转换应用于SVG标记的内容。或者您也可以使用CSS3 transform方法。

.svg {width:100%; display:block;
transform:scale(5); 
-webkit-transform:scale(5); 
-moz-transform:scale(5); 
-ms-transform:scale(5); 
-o-transform:scale(5);
}

<svg class="svg" preserveAspectRatio="xMidYMid meet" viewbox="0 0 102 102">
<g transform="scale(0.5)">
/*rest code will come inside this.*/
</g>
</svg>

这是你的工作演示。 http://jsfiddle.net/jA62R/10/