Question

我尝试使用.pin {background: (rest of code)}显示SVG。它看起来像是一个推入纸张的3D推针。为了实现这一点，我在SVG上使用了Alpha透明度径向渐变，因此我可以轻松控制尺寸质量并增加深度。我的代码在Chrome上看起来很棒。但是，在IE（版本11）中，SVG没有显示。我认为我的渐变封面隐藏了IE中的SVG。它在Chrome中显示透明。我该怎么做才能解决这个问题？

你必须在IE上加载我的问题甚至看到问题，就像我说的，它在Chrome中看起来很好。我在两者中测试了这个问题，只有IE显示我的问题。我把原始代码放在SVG被隐藏的地方，然后用第二个引脚div再次放入代码但是取出了渐变代码，这导致SVG再次可见，但没有我漂亮的渐变。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

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

备注：

cover语法中没有radial-gradient的直接等效词。您可以使用其中一个可用的大小选项而不是它。默认值为farthest-corner。您可以在vals' answer here。
中找到有关各种尺寸选项的更多信息

this WebKit blog article中描述的径向渐变的语法和值似乎与标准不符。它列出了cover和contain作为选项，但下面是MDN对这些值的评价。

早期草稿包括其他关键词（封面和包含）作为标准最远角和最近边的同义词。

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

SVG仅在IE中通过渐变叠加隐藏，在Chrome中运行良好

1 个答案: