CSS svg 内容不会缩放答案

【问题标题】：CSS svg contents won't scaleCSS svg 内容不会缩放
【发布时间】：2013-11-28 23:52:51
【问题描述】：

我在 Illustrator CS6 中创建了一个矢量图像，我想将其直接嵌入到 HTML 页面中。我将其保存为 SVG，然后单击“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"
|                                   |
_____________________________________

【问题讨论】：

我真的不认为 css 在这里会有所帮助。您需要缩放 svg 以填充该框。
您是否只需要添加preserveAspectRatio="none" 作为<svg> 元素的属性？
@abhitalks 你是说不可能复制 svg 图像的行为吗？
@Robert 我确实想保留纵横比。我希望 svg 表现得像块元素
但它是一个块元素。也许您应该创建一个 jsfiddle，因为我并不真正理解所写的问题。

标签： html css svg

【解决方案1】：

顺便说一句，您尝试过：

.svgzoom {
    zoom: 200%; 
}

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

但可能无法在 Firefox 中运行。您可能需要尝试转换比例。

【讨论】：

我不确定他的这是否与我的问题有关。