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

Question

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

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)");

这是我得到的输出：

不应该有'red'、'yellow'和'green' 3种不同的均匀分布的颜色变化吗？我在这里做错了什么？

Answer 1

有 3 种不同的均匀分布的颜色变体，但您的 rect 的宽度仅为 100px，而 linearGradient 的宽度与 svg 元素相同。将两个宽度设置为相等，您的渐变将完全可见。

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

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

SVG, D3: Understanding stop offset attribute

javascript

svg

d3.js

linear-gradients