如何使用 SVG 和 D3 绘制大屏展示的复杂边框背景？

<svg width="100%" height="100%">
</svg>

<rect width="100%" height="100%" fill="none" stroke="black" stroke-width="10" />

<rect width="100%" height="100%" fill="lightblue" />

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

    var svg = d3.select("svg");

    // 为边框和背景创建数据
    var data = [
        {
            type: "border",
            width: 10,
            color: "#000"
        },
        {
            type: "background",
            width: 100,
            color: {
                start: "#00f",
                end: "#0f0"
            }
        }
    ];

    // 为边框绘制矩形
    svg.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "none")
        .attr("stroke", function(d) { return d.color; })
        .attr("stroke-width", function(d) { return d.width; });

    // 为背景绘制渐变矩形
    svg.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", function(d) { return d.color.start; })
        .attr("shape-rendering", "crispEdges");

    svg.append("defs")
        .append("linearGradient")
        .attr("id", "gradient")
        .attr("x1", "0%")
        .attr("y1", "0%")
        .attr("x2", "100%")
        .attr("y2", "100%")
        .selectAll("stop")
        .data([
            {offset: "0%",  color: d.color.start,},
            {offset: "100%", color: d.color.end,}
        ])
        .enter().append("stop")
        .attr("offset", function(d) { return d.offset; })
        .attr("stop-color", function(d) { return d.color; });

    svg.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "url(#gradient)");
</script>