css - Sketch SVG 线性渐变在浏览器中是黑色而不是白色

Question

我有一个简单的 SVG，我画的是 Sketch 2。

形状是一个简单的倾斜矩形，从上到下具有线性渐变。顶部为白色，不透明度为 75%，底部也是白色，不透明度为 0%。

我在上面的示例中添加了灰色背景，因此您可以看到形状和衬垫渐变。

我的问题是，当我导出 SVG 并将其用作 CSS 中的 background-image 时，白色变为黑色。

这是从 Sketch 导出的 SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="150px" height="50px" viewBox="0 0 150 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>Untitled</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1" stop-color="#FFFFFF">
            <stop stop-opacity="0.75" offset="0%"></stop>
            <stop stop-opacity="0" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M100.099413,0 L0,0 L49.9005867,50 L150,50 L100.099413,0 Z" id="Rectangle-1" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"></path>
    </g>
</svg>

这是缩小后的 SVG:

<svg width="150" height="50" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg"><title>Untitled</title><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a" stop-color="#fff"><stop stop-opacity=".75" offset="0%"/><stop stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M100.1 0H0l49.9 50H150L100.1 0z" fill="url(#a)"/></g></svg>

我这辈子都弄不明白为什么会这样； SVG 对我来说看起来是正确的。为什么 SVG 在浏览器中呈现为负片？

澄清一下，当我再次在 Sketch 中重新打开导出或缩小的 SVG 时，它会正确呈现(白色衬里渐变)。

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

将 stop-color 添加到 stop元素:

body {
  background-color: #D8D8D8;
}

<svg width="150" height="50" viewBox="0 0 150 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Untitled</title>
  <defs>
    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
      <stop stop-color="#FFFFFF" stop-opacity="0.75" offset="0%"></stop>
      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
    </linearGradient>
  </defs>
  <g>
    <path d="M100.099413,0 L0,0 L49.9005867,50 L150,50 L100.099413,0 Z" fill="url(#linearGradient-1)"></path>
  </g>
</svg>