问草图SVG线性梯度在浏览器中是黑色而不是白色
EN

Stack Overflow用户

提问于 2015-02-09 04:41:48

回答 1查看 2.1K关注 0票数 0

我有一个简单的SVG，我画的是草图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时，它被正确地呈现(一个白色的线性梯度)。

如果能在这方面提供任何帮助，我将不胜感激。

谢谢!

css

svg

linear-gradients

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-09 04:59:44

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