SVG不从父级继承值 [英] SVG's not inheriting values from parent

问题描述

因此，这似乎是一个错误，只是今天在Chrome中突然出现（和火狐显然）。

我有一个SVG包裹在一个跨度（我试过div和对象标签，它似乎没有关系），并且该span具有指定的高度和宽度。昨天，子元素的大小适合于其父元素的完整尺寸，像其他每个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/svgxmlns：xlink =http://www.w3.org/1999/xlink > 
< symbol id =run-importviewBox =0 0 48 48> 
< path fill =＃4B4B4Bd =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,12c-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.2 c-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.71-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或苹果浏览器。关于如何解决这个问题的想法，或它从哪里来的？

现在我唯一的解决方法是专门设置svg大小继承自它的父。

此外，还要提供版本号：

1。：Chrome：版本36.0.1985.125 m

2。 Firefox：30.0

解决方案

高度和宽度在< svg> 元素，你可以使用CSS设置，如果你想，但我已经使用属性设置。

 < svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/ 1999 / xlinkwidth =0height =0> 
< symbol id =run-importviewBox =0 0 48 48> 
< path fill =＃4B4B4Bd =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,12c-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.2 c-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.71-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> 
  

So this seems to be a bug that just cropped up in Chrome today (and Firefox apparently).
I have an SVG wrapped inside a span (I've tried div's and object tags as well, it doesn't seem to matter), and that span has a specified height and width. Yesterday, the child element would size itself appropriately to the full dimensions of it's parent, as every other html element does. However, now, that SVG element is not getting the inherited size from its parent, and is sizing itself based off the actual size of the SVG.
Check out the fiddle here: http://jsfiddle.net/theandybob/4LHeB/
The CSS:

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

And the Code:

<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>

Now, this happens in Chrome (both on Windows and Mac), and Firefox, but not IE or Safari. Ideas on how to fix the issue, or where it came up from?
The only workaround I have now is to specifically set the svg size to inherit from it's parent.

Also, throwing the version numbers out there:
1. Chrome: Version 36.0.1985.125 m
2. Firefox: 30.0

解决方案

You need height and width on the <svg> element which you can set using CSS if you wish but which I've set using attributes.

<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不从父级继承值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！