SVG、D3：了解停止偏移属性

Question

我试图理解 'stop' svg 元素的 offset 属性，但无法理解它。这是代码：

var vis = d3.select(scalecontainer)
            .append("svg")
            .attr('height', 30)

var gradient = vis.append("linearGradient")
                    .attr("y1", 0)
                    .attr("y2", 0)
                    .attr("x1", "0%")
                    .attr("x2", "100%")
                    .attr("id", "gradient")
                    .attr("gradientUnits", "userSpaceOnUse")

gradient
    .append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "red")

gradient
    .append("stop")
    .attr("offset","33%")
    .attr("stop-color", "yellow")

gradient
    .append("stop")
    .attr("offset", "66%")
    .attr("stop-color", "green")

var rect = vis.append("rect")
            .attr("x", 10)
            .attr("y", 10)
            .attr("width", 100)
            .attr("height", 20)
            .attr("fill", "url(#gradient)");

这是我得到的输出：

难道不应该有“红色”、“黄色”和“绿色”三种不同的均匀间隔的颜色变化吗？我在这里做错了什么？

Answer 1

有 3 种不同的均匀间隔的颜色变量，但你的rect宽度只有 100px，而 的linearGradient宽度是元素的宽度svg。将两个宽度设置相等，渐变将完全可见。

在矩形内获得完整渐变的最简单方法是设置.attr("gradientUnits", "objectBoundingBox"). 这样，您的渐变将被缩放以适合引用渐变的元素。所有可能设置的详细说明可以在MDN上阅读。