0
我有我得出一個簡單的SVG是草圖2.草圖SVG線性漸變是黑色而不是白色在瀏覽器
形狀是一個簡單的偏斜矩形,具有線性梯度,從頂部到底部。頂部爲白色,不透明度爲75%,底部爲白色,不透明度爲0%。
我已經加入的例子中爲灰色背景之上,以便可以看到的形狀和襯墊梯度。
我的問題是,當我導出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