高度：SVG上的自动不起作用答案

【问题标题】：height: auto on SVG not working高度：SVG上的自动不起作用
【发布时间】：2015-03-28 02:13:57
【问题描述】：

我正在尝试使用此处详述的“符号”方法来使用 SVG 精灵表。

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

我的 HTML 很简单。

<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>

这是来自 SVG 文件的示例符号

<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol>

我遇到的问题是，当我使用 CSS 将 SVG 元素的宽度设置为 64 像素时，SVG 的高度会自动设置为 150 像素。我试过设置 height:auto;和高度：100%；在 SVG 元素上，但没有区别。让它工作的唯一方法是设置 height:64px;我不想这样做，因为我的图标的纵横比可能并不总是方形的。我希望它自动以原始纵横比缩放 SVG，因此如果我将宽度设置为 400 像素，4:3 图标（由视图框定义）将自动获得 300 像素的高度。

我已经阅读了一些关于缩放 SVG 和保持纵横比的指南，其中一些在使用 IMG 元素时有解决方案，但我找不到用于内联 SVGS 或通过 USE 使用外部 SVG 的解决方案。

有人知道适用于所有浏览器（包括 IE9+ 和 Android 4.0+）的解决方案吗？

【问题讨论】：

标签： css svg aspect-ratio

【解决方案1】：

DEMO

您需要在链接到的每个元素上定义一个 viewBox。因为在一个 SVG 文档 中可以有不同的元素。

所以从您链接到的元素中删除viewBox。将viewBox 添加到您链接的位置。

我建议你将 viewBox 添加到 svg 元素中：

<svg class="test" viewBox="0 0 25 25">
    <use xlink:href="/images/iconSprite.svg#clock"/>
</svg>

现在你可以缩放它了：

如果你定义了css宽度：

.test {
    width: 50px;
}

只要它适合高度或宽度，它就会显示。

因此，如果您想要响应式设计，您可以简单地将其缩放 % 长度
.test { width:30%; }

SCALE SVG 一篇关于从 CSS 技巧缩放 svg 的非常好的文章 :)

【讨论】：

【解决方案2】：

在旧版本的 Safari 以及一些旧的 Android 浏览器中，设置 viewbox 和宽度是不够的。

在我的例子中，我需要应用 height:100%;以及宽度。

【讨论】：