如何使用SVG漸變顯示顏色不一相對於有色區域

我使用SVG和D3創建條形圖，並有關於如何着色他們一個問題的大小。我搜索在本網站和其他許多問題，尚未發現有同樣的問題的人。如何使用SVG漸變顯示顏色不一相對於有色區域

我希望每個酒吧從底部開始，使用一種顏色（例如黃色），並且隨着酒吧變得更高，逐漸混合更多第二種顏色（紅色，例如），以便酒吧在他們的最大潛在高度將只是第二種顏色。在這個例子中，這是酒吧的頂部一半的位勢高度將是橙色。

我能夠編寫一個函數來產生，對於任何給定的高度，根據需要，將着色巴的獨特線性梯度的棒。

但是，由於該圖是動態的，並且隨着數據刷新，條形圖的高度可能每秒變化很多次，所以每次創建和應用新漸變並且對於每個條形圖肯定是無效的並且可能導致嚴重滯後刷新酒吧。（我承認我實際上沒有嘗試過除靜態測試用例以外的其他任何東西，所以我可能會錯誤地假設最後一個假設。）

使用靜態漸變當然會產生像這樣的顏色混合根據欄的高度，而不是區域的高度：

Using static gradient

在我需要的情況下，但是，小酒吧應該有分別很少紅色或深藍色。

我的問題，最後，是這樣的：有沒有辦法來

創建應用到SVG區域本身（容易）
已經所說的梯度以某種方式掩蓋一個梯度（容易）
然後選擇性地表示的曲線圖的條的矩形下方揭露？（???）

或者，有沒有其他一些技術可以忽略？

感謝

來源

2012-10-10 SwimsZoots

在平原SVG可以指定是否將漸變的座標系統延伸到填充形狀。我不知道這樣D3，我不知道是否或如何可用。 –

這實現起來很簡單，但有點難以把握，你需要指定梯度單位是userSpaceOnUse，然後定義你想讓它通過x1應用區域，x2，y1，y2 ：

var gradient = svg 
    .append("linearGradient") 
    .attr("y1", minY) 
    .attr("y2", maxY) 
    .attr("x1", "0") 
    .attr("x2", "0") 
    .attr("id", "gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 

gradient 
    .append("stop") 
    .attr("offset", "0") 
    .attr("stop-color", "#ff0") 

gradient 
    .append("stop") 
    .attr("offset", "0.5") 
    .attr("stop-color", "#f00")

這裏你可以看到一個演示：http://jsfiddle.net/ZCwrx/

來源

2012-10-11 00:00:27 Duopixel

完美！正是我需要的。 – SwimsZoots

如何使用SVG漸變顯示顏色不一相對於有色區域

回答

相關問題