css - 为什么我的 SVG 图标没有居中？

Question

http://jsfiddle.net/VJ3uN/

我在父框中有一个 SVG 图标。一旦我开始向父级添加填充，SVG 图标就会捕捉到框底部附近。有什么想法吗？

相关html:

<div class="icon">
    <svg viewBox="0 0 32 32" height="100%" width="100%">
        <path id="gear" fill-rule="evenodd" d="..."></path>
    </svg>
</div>

和CSS:

.icon {
    width   : 16px;
    height  : 16px;
    padding : 40px;
    border  : 1px solid #000;
}

Answer 1

让您的浏览器处理 width和 height自动删除 width和 height在 <svg>元素。

<div class="icon">
    <svg viewBox="0 0 32 32">
        <path id="gear" fill-rule="evenodd" d="..."></path>
    </svg>
</div>

如果它不起作用，请根据此错误 https://bugs.webkit.org/show_bug.cgi?id=82489 ) 请把这个选择器放到你的样式表中

svg {
    max-height: 100%;
}

这是一个结果:http://jsfiddle.net/gGfx5/3/