Sketch SVG Linear Gradient在浏览器中为黑色而不是白色

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元素：

＆＃13;

＆＃13;

body {
  background-color: #D8D8D8;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;