高度: SVG上的自动不工作
我正在尝试使用SVG精灵工作表，使用这里详细介绍的"symbol“方法。
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像素。我已经尝试在SVG元素上设置height:auto；和height:100%；，但没有区别。让它工作的唯一方法是设置高度:64px；我不想这样做，因为我的图标的纵横比可能并不总是方形的。我想要它做的是自动缩放SVG的原始纵横比，因此，如果我将宽度设置为400px，4:3图标(由viewbox定义)将自动获得300px的高度。
我已经阅读了几个关于缩放SVG和保留宽高比的指南，其中一些在使用IMG元素时有解决方案，但我找不到用于内联SVG或使用外部SVG的解决方案。
有谁知道一种解决方案，可以在包括IE9+和Android 4.0+在内的所有浏览器中工作？
回答 2
Stack Overflow用户
发布于 2015-03-05 23:22:31
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;
}只要它适合高度或宽度，它就会显示出来。
因此，如果你想要一个响应式的设计，你可以简单地通过% length来扩展它
.test { width:30%; }
SCALE SVG一篇关于从CSS-tricks扩展svg的非常好的文章:)
Stack Overflow用户
发布于 2015-08-08 12:05:32
在旧版本的Safari以及一些旧的Android浏览器中，设置viewbox和宽度是不够的。
在我的例子中，我需要应用高度:100%；以及宽度。
https://stackoverflow.com/questions/28204790
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号