草图SVG线性渐变是黑色而不是白色在浏览器

问题描述：

形状是一个简单的偏斜矩形，具有线性梯度，从顶部到底部。顶部为白色，不透明度为75％，底部为白色，不透明度为0％。

enter image description here

我已经加入的例子中为灰色背景之上，以便可以看到的形状和衬垫梯度。

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

这里是从草图中导出的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错误。你有没有尝试不同的浏览器？ – 2015-02-09 13:52:42

感谢罗伯特，但是，我尝试了各种浏览器（Chrome，FF，IE9 +，Safari等）。 – 2015-02-09 14:08:40

好的，因为当我这样做的时候，一定有问题出现在你没有向我们展示的东西上。背景图像的语法究竟是什么？ – 2015-02-09 14:10:30

答

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

草图SVG线性渐变是黑色而不是白色在浏览器

相关推荐