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

【问题标题】：Sketch SVG Linear Gradient is black instead of white in the browserSketch SVG 线性渐变在浏览器中是黑色而不是白色
【发布时间】：2015-07-10 19:42:54
【问题描述】：

我有一个简单的 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 时，它会正确呈现（白色衬里渐变）。

对此的任何帮助将不胜感激。

谢谢！

【问题讨论】：

在我看来是否与背景图像相同。也许这是一个UA错误。你试过不同的浏览器吗？
谢谢罗伯特，但是是的，我尝试过各种浏览器（Chrome、FF、IE9+、Safari 等）。
好的，因为当我这样做的时候它起作用了，你没有向我们展示的东西肯定有问题。你的背景图片的语法到底是什么？

标签： css svg linear-gradients

【解决方案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>

【讨论】：