SVG 没有从父级继承值答案

【问题标题】：SVG's not inheriting values from parentSVG 没有从父级继承值
【发布时间】：2014-09-09 18:31:28
【问题描述】：

所以这似乎是今天在 Chrome 中出现的一个错误（显然还有 Firefox）。
我有一个 SVG 包裹在一个跨度内（我也尝试过 div 和对象标签，这似乎并不重要），并且该跨度具有指定的高度和宽度。昨天，子元素将自己调整大小以适应其父元素的完整尺寸，就像所有其他 html 元素一样。然而，现在，SVG 元素没有从其父元素继承继承大小，而是根据 SVG 的实际大小调整自身大小。
在这里查看小提琴：http://jsfiddle.net/theandybob/4LHeB/
CSS：

.icon-small {
   width: 32px;
   height: 32px;
   position: relative;
   display: inline-block;
}

还有代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="run-import" viewBox="0 0 48 48">
        <path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
    </symbol>
</svg>

<span class="icon-small">
    <svg><use xlink:href="#run-import"></use></svg>
</span>

现在，这发生在 Chrome（Windows 和 Mac 上）和 Firefox 中，但不是 IE 或 Safari。关于如何解决这个问题的想法，或者它是从哪里来的？
我现在唯一的解决方法是专门设置 svg 大小以从其父级继承。

另外，把版本号扔在那里：
1. Chrome：版本 36.0.1985.125 m
2.火狐：30.0

【问题讨论】：

标签： html css google-chrome firefox svg

【解决方案1】：

您需要 <svg> 元素的高度和宽度，如果您愿意，可以使用 CSS 设置，但我已使用属性设置。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <symbol id="run-import" viewBox="0 0 48 48">
        <path fill="#4B4B4B" d="M24,0c4.4,0,8.4,1.1,12,3.2s6.6,5.1,8.7,8.7c2.1,3.7,3.2,7.7,3.2,12s-1.1,8.4-3.2,12 c-2.1,3.7-5.1,6.6-8.7,8.7c-3.7,2.1-7.7,3.2-12,3.2c-4.4,0-8.4-1.1-12-3.2c-3.7-2.1-6.6-5.1-8.7-8.7C1.1,32.4,0,28.4,0,24 s1.1-8.4,3.2-12S8.3,5.4,12,3.2S19.6,0,24,0z M36,25.7c0.7-0.4,1-0.9,1-1.7c0-0.8-0.3-1.3-1-1.7l-17-10c-0.6-0.4-1.3-0.4-2,0 c-0.7,0.4-1,1-1,1.8v20c0,0.8,0.3,1.4,1,1.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3L36,25.7z"></path>
    </symbol>
</svg>

<span class="icon-small">
    <svg width="100%" height="100%"><use xlink:href="#run-import"></use></svg>
</span>

【讨论】：

通过将宽度和高度设置为继承来完成与我之前提到的相同的事情。是的，我会修改 CSS，而不是元素本身。当前的解决方法是在所有 SVG 元素上应用 sizing:inherit。我认为在更新 Chrome 之前会发现这样的问题，但我所做的是完全标准的。关于它可能来自哪里的任何想法？
关于您的编辑，以前，我们可以将 viewBox 应用于符号，然后将其应用于跨度内的 svg。所以有些事情已经改变了，不再是这种情况了？在我将 viewBox 的位置更改为 span 内的 svg 之前，我想知道可能导致此问题的更改。我希望避免下意识的反应来尝试进行“修复”，只是为了以后需要修复该修复。
因此，在
如果你愿意。但是你需要设置高度和宽度，你可以用 CSS 来做。您确实需要在该 SVG 上指定一些大小信息，但没有办法解决。
好吧，看来，以前接收它的大小的方式发生了一些变化，所以我现在必须明确地说出大小。猜猜这不是太奇怪，但不方便。感谢您提供信息，我会继续将您的回复标记为已回答。