如何基於某些功能為SVG中的每個像素分配顏色？

Question

我想做的就是根據與屏幕上其他對象的關系，根據像素的x和y坐標為每個像素着色。 我正在使用d3來完成所有其他的svg工作，但是我無法弄清楚如何在數據綁定后再處理每個像素。 不發布代碼，因為我正在尋找一種非常通用的方式來執行此操作：例如，為每個點着色，使（x + y）％73 == 0綠色。

Answer 1

對於那些感興趣的人：回想一下，我建議在SVG上使用canvas來完成這樣的任務，但這是使用d3的一種共同解決方案：

WIDTH = $(window).width();
HEIGHT = $(window).height();

$(document).ready( function() {
    var svg = d3.select("#svg")
        .attr("width", WIDTH)
        .attr("height", HEIGHT);
    points = []
    for (x=0;x<WIDTH/10;x++) {
        for (y=0;y<HEIGHT/10;y++) {
            points.push([x,y]);
        }
    }
    svg.selectAll("rect")
        .data(points)
      .enter().append("rect")
        .attr("x", function(d) {return d[0];})
        .attr("y", function(d) {return d[1];})
        .attr("width",1)
        .attr("height",1)
        .style("fill",function(d) {
            if ((d[0] + d[1])%73 == 0)
                return "green";
            return "black";
        });
}

假設您的html正文中有一個id = svg的svg元素。 為了測試目的，我在每個dimensino中只經歷了1/10的方式，完整尺寸的加載速度要慢100倍，考慮到您確實不應該為此使用SVG，這相當慢。