高度:SVG 上的自动不起作用 [英] height: auto on SVG not working
问题描述
我正在尝试使用此处详述的符号"方法来使用 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="M23 1089019.51 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.4692.8 - 469 - 59 .87 - 59 -.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"路径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-.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>我遇到的问题是，当我使用 CSS 将 SVG 元素的宽度设置为 64px 时，SVG 的高度会自动设置为 150 像素.我试过设置高度:自动；和高度:100%；在 SVG 元素上，但没有区别.让它工作的唯一方法是设置 height:64px;我不想这样做，因为我的图标的纵横比可能并不总是方形的.我想让它做的是自动按原始纵横比缩放 SVG，因此如果我将宽度设置为 400px，一个 4:3 的图标(由视图框定义)将自动获得 300px 的高度.
我已经阅读了一些关于缩放 SVG 和保持纵横比的指南，有些指南在使用 IMG 元素时有解决方案，但我找不到用于内联 SSVG 或使用外部 SVG 的 USE.
有人知道适用于所有浏览器(包括 IE9+ 和 Android 4.0+)的解决方案吗?
您需要在链接到的每个元素上定义一个 viewBox.因为在一个 SVG 文档中可以有不同的元素.
因此从您链接到的元素中删除 viewBox.将 viewBox 添加到您要链接的位置.
我建议您将 viewBox 添加到 svg 元素:
现在您可以缩放了:
如果你定义了css宽度:
.test {宽度:50px；}只要它适合高度或宽度，它就会显示.
所以如果你想要一个响应式设计，你可以简单地按%长度.test { width:30%;}
SCALE SVG 一篇关于从 CSS-tricks 缩放 svg 的非常好的文章:)
I am trying to use an SVG sprite sheet using the "symbol" method detailed here.
http://css-tricks.com/svg-sprites-use-better-icon-fonts/
My HTML is very simple.
<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>
And here is an example symbol from the SVG file
<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>
The problem I am having is that when I use CSS to set the width of the SVG element to 64px the height of the SVG is automatically set to 150 pixels. I have tried setting height:auto; and height:100%; on the SVG element but it makes no difference. The only way to get it to work is to set height:64px; which I don't want to do because the aspect ratio of my icons may not always be square. What I want it to do is automatically scale the SVG in its original aspect ratio, so a 4:3 icon (as defined by the viewbox) would automatically get a heightof 300px if I set the width to 400px.
I have read several guides on scaling SVG and preserving aspect ratio and some have solutions when using an IMG element but I can't find one for inline SVGS, or using an external SVG with USE.
Anybody know a solution which works in all browsers including IE9+ and Android 4.0+?
You need to define a viewBox on each element that you link to. because there can be different elements in one SVG document.
So remove the viewBox from the element you link to.
Add a viewBox to the place you're linking from.
I suggest you add the viewBox to a svg element:
<svg class="test" viewBox="0 0 25 25">
<use xlink:href="/images/iconSprite.svg#clock"/>
</svg>
Now you can scale it:
If you define the css width:
.test {
width: 50px;
}
It will display as long as it fits on height or width.
So if you want a responsive design you can simply scale it by % length
.test { width:30%; }
SCALE SVG A really good article about scaling svg from CSS-tricks :)
这篇关于高度:SVG 上的自动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
