2013-11-28 24 views
3

我创建在Illustrator CS6矢量图像,我想直接嵌入到HTML页面。我将其保存为SVG,然后单击“SVG代码”检索代码看起来像这样:CSS SVG内容不会规模

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="623.4px" height="39.7px" viewBox="0 0 623.4 39.7" enable-background="new 0 0 623.4 39.7" xml:space="preserve"> 
<g> 
    <path d="M12.5,40.4c-5.3,0-9.2-1.8-12.2-6l5.2-4.7c1.6,2,4.2,3.5,6.2,3.5c2.7,0,5-2,5-4.3c0-2.1-1.4-4.1-4....... [ LOT OF PATHS ETC ETC ] 
</svg> 

我可以改变CSS的SVG框的大小,但内容不会改变大小。我希望它们按比例缩放,以便我可以将图像设置为容器的整个高度。我该怎么做呢?我试图避免JavaScript。

这里是发生了什么事的示意图:

_____________________________________ 
|         | 
| small design here     | 
|         | 
|         | 
|         | 
|         | 
|         | 
|         | <--empty space "booo" 
|         | 
_____________________________________ 
+0

我真的不认为CSS将有助于在这里。您需要放大svg以填写该框。 – Abhitalks

+0

你只需要添加preserveAspectRatio =“none”作为''元素的属性? –

+0

@abhitalks,你说这是不可能复制SVG图像的行为呢? – emersonthis

回答

0

顺便说你尝试:

.svgzoom { 
    zoom: 200%; 
} 

演示小提琴:http://jsfiddle.net/tJu6n/

可能无法在Firefox的工作,虽然。你可能不得不尝试转换规模。

+0

我不确定他的这一点与我的问题有关。 – emersonthis