css - SVG 仅在 IE 中被渐变叠加隐藏，在 Chrome 中工作正常

Question

我正在尝试使用 .pin {background: (rest of code)} 显示 SVG。它应该看起来像一个插入纸中的 3D 图钉。为实现这一点，我在 SVG 上使用了 alpha 透明度径向渐变，这样我就可以轻松控制大小质量并增加深度。我的代码在 Chrome 上看起来很棒。但是，在 IE(版本 11)中，SVG 不显示。我认为我的渐变封面隐藏了 IE 中的 SVG。它在 Chrome 中显示正确。我该怎么做才能解决这个问题？

你必须在 IE 上加载我的问题才能看到问题，正如我所说，它在 Chrome 中看起来很好。我在两者中都测试了这个问题，只有 IE 显示了我的问题。我将原始代码放在 SVG 被隐藏的地方，然后用第二个 pin div 再次放置代码，但取出了渐变代码，这导致 SVG 再次可见，但没有我漂亮的渐变。

.pin1 {
  background: -webkit-radial-gradient(top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%), url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');
  background: radial-gradient(top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%), url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');
  background-size: 40px 40px;
  background-position: -2px -2px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  -webkit-radial-gradient: top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%;
  radial-gradient: top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%;
  margin: 0 auto -20px auto;
}
.pin2 {
  background: url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');
  background-size: 40px 40px;
  background-position: -2px -2px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  -webkit-radial-gradient: top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%;
  radial-gradient: top center, ellipse cover, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%;
  margin: 0 auto -20px auto;
}

<div class="pin1"></div>
<br>
<br>
<div class="pin2"></div>

Answer 1

不，radial-gradient 并没有隐藏 SVG 背景，而是让 UA 从整体上忽略背景属性设置。发生这种情况的原因是径向渐变语法错误。在所有非 WebKit 浏览器中都会出现此问题。 Chrome 之所以能够正确显示它，是因为 -webkit-radial-gradient 有一个正确的语法。

以上说法可以通过在IE中查看元素来验证。 background 属性会有一个锯齿形的红色下划线(就像在 MS Word 中出现拼写错误时一样)。这表明属性值不正确。

一旦radial-gradient语法被更正为与 W3C 规范内联，它在所有浏览器中都按预期工作。在 IE10+(包括 Edge)、Firefox、Chrome 和 Opera 中测试。

.pin1 {
  background: radial-gradient(ellipse at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.5) 100%), url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');
  background-size: 40px 40px;
  background-position: -2px -2px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  margin: 0 auto -20px auto;
}
.pin2 {
  background: url('http://www.cafenocturne.com/images/svg/CafeLogoCircleSVG.svg');
  background-size: 40px 40px;
  background-position: -2px -2px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  margin: 0 auto -20px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pin1"></div>
<br>
<br>
<div class="pin2"></div>

^{为简洁起见，我删除了一些特定于浏览器的属性，从而精简了代码。}

注意事项:

• 在 radial-gradient 语法中没有直接等效于 cover 的方法。您可以使用可用的尺寸选项之一代替它。默认值为 farthest-corner。您可以在 vals' answer here 中找到有关各种尺寸选项的更多信息。 .

• this WebKit blog article 中描述的语法和值对于径向渐变似乎不符合标准。它列出了 cover 和 contain 作为选项，但下面是 MDN 的内容不得不说说这些值(value)观。

  Early drafts included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side respectively.

• 正如 vals 在对问题的评论中所指出的，radial-gradient 不是属性。它是一个值，应与 background-image 属性一起使用。