草圖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時，它會被正確渲染（白色的線性漸變）。

任何幫助，這將不勝感激。

謝謝！

來源

2015-02-09 Jonathon Oates

看起來作爲背景圖像或不一樣的我。也許這是一個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>

來源

2015-02-09 12:59:44

草圖SVG線性漸變是黑色而不是白色在瀏覽器

回答

相關問題