css – height：auto on SVG不工作

我试图使用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元素的宽度设置为64px时,SVG的高度将自动设置为150像素.我试过设置高度：auto;高度：100％;在SVG元素上,但没有什么区别.让它工作的唯一方法是设置height：64px;我不想做,因为我的图标的长宽比可能不总是平方.我想要做的是自动缩放SVG的原始宽高比,因此如果将宽度设置为400px,则4：3图标(由视图框定义)将自动获得高达300像素.

我已经阅读了几个关于缩放SVG和保持宽高比的指南,有些在使用IMG元素时有解决方案,但是我找不到一个用于内联SVGS或使用外部使用的SVG的SVG.

任何人都知道在所有浏览器(包括IE9和Android 4.0)中有效的解决方案？

解决方法

DEMO

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

所以从你链接到的元素中删除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-tricks缩放svg的一篇很好的文章:)

css – height：auto on SVG不工作

解决方法

猜你在找的CSS相关文章