漸變顏色拉斐爾

當在拉斐爾我將顏色設置爲90-#7ADADD-#338A93在路徑上它變成了漸變。然後當我檢查元素時，我可以看到它的fill屬性設置爲類似於：url(#490-_7ADADD-_338A93)。漸變顏色拉斐爾

如果我嘗試將其更改爲90-#7ADADD-#338A93，它會變黑。問題是如何從外部更改漸變顏色？我怎樣才能從我原來的90-#7ADADD-#338A93中計算出這個url(#490-_7ADADD-_338A93)？

2013-02-15 ivkremer

如果你看看全SVG源可能是這個樣子

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <linearGradient id="490-_7ADADD-_338A93" x1="0%" y1="0%" x2="100%" y2="0%"> 
     .... 
    </linearGradient> 
    </defs> 
    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#490-_7ADADD-_338A93)" /> 
</svg>

的url(...)部分實際上是在defs定義的梯度的參考。如果您將引用更改爲不存在的內容，則會以黑色填充顯示。

在拉斐爾做的合乎邏輯的事情是保持你的梯度操作在庫中。如果你這樣做......

path.attr({"fill": "90-#fff-#000"}) 
path.attr({"fill": "90-#ccc-#666"})

隨後拉斐爾將插入一個新的linearGradient並引用它。

如果你真的需要操縱SVG源代碼，那麼你可以這樣做......

var gradient = document.getElementById('490-_7ADADD-_338A93'); 
var stops = gradient.querySelectorAll('stop'); 
stops[0].setAttribute("stop-color", "#c00"); 
stops[1].setAttribute("stop-color", "#00c");

但是，這將打破VML兼容性（IE 8或以下）。

來源

2013-02-15 15:49:52 Duopixel

漸變顏色拉斐爾

回答

相關問題