Question

所以这似乎是今天在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。 Firefox：30.0

Answer 1

您需要使用CSS设置的<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>

SVG不会从父级继承值

1 个答案: