SVG D3 三角形多角渐变实现指南

var svgDefs = svg.append('defs');

// 定义多个径向渐变
var gradient1 = svgDefs.append("radialGradient")
    .attr("id", "svgGradientBlack")
    .attr("cx", "50%").attr("cy", "0%").attr("r", "70%");
gradient1.append("stop").attr("offset", "70%").attr("stop-color", "black");
gradient1.append("stop").attr("offset", "100%").attr("stop-color", "white");

var gradient2 = svgDefs.append("radialGradient")
    .attr("id", "svgGradientBlue")
    .attr("cx", "0%").attr("cy", "100%").attr("r", "70%");
gradient2.append("stop").attr("offset", "70%").attr("stop-color", "blue");
gradient2.append("stop").attr("offset", "100%").attr("stop-color", "white");

var gradient3 = svgDefs.append("radialGradient")
    .attr("id", "svgGradientRed")
    .attr("cx", "100%").attr("cy", "100%").attr("r", "70%");
gradient3.append("stop").attr("offset", "70%").attr("stop-color", "red");
gradient3.append("stop").attr("offset", "100%").attr("stop-color", "white");

// 尝试将多个渐变应用到同一个polyline，但实际上只有最后一个会生效
var trianglePoints = [[xScale(0), yScale(0)], [xScale(1), yScale(0)],[xScale(0.5), yScale(1)]];
svg.append('polyline')
    .attr('points', trianglePoints)
    .style('fill', "url(#svgGradientBlack)") // 会被后续的覆盖
    .style('fill', "url(#svgGradientBlue)")  // 会被后续的覆盖
    .style('fill', "url(#svgGradientRed)");  // 只有这个会生效

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="0" y="0" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml" 
         style="width:100px; height:100px; background:conic-gradient(red, green, blue);">
    </div>
  </foreignObject>
</svg>

// 假设svg已经被D3初始化
// var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500);

var width = 500, height = 500;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", `0 0 ${width} ${height}`); // 使用viewBox确保缩放

var defs = svg.append("defs");

// 定义三角形的顶点坐标
// 例如，一个等腰直角三角形，左下角(0,100)，右下角(100,100)，顶点(50,0)
// 为了演示方便，我们假设三角形覆盖了整个foreignObject的区域
var trianglePoints = "0,100 100,100 50,0"; 

// 1. 定义裁剪路径
defs.append("clipPath")
    .attr("id", "triangleClip")
    .append("polygon")
    .attr("points", trianglePoints);

// 2. 创建一个g元素来应用裁剪路径，并包含foreignObject
var gContainer = svg.append("g")
    .attr("clip-path", "url(#triangleClip)");

// 3. 将foreignObject添加到gContainer中
// 确保foreignObject的大小和位置与需要填充的三角形区域匹配
// 这里的x, y, width, height需要根据实际三角形的边界框来设定
// 假设三角形的边界框是 x=0, y=0, width=100, height=100
gContainer.append("foreignObject")
    .attr("x", 0) // foreignObject的起始X坐标
    .attr("y", 0) // foreignObject的起始Y坐标
    .attr("width", 100) // foreignObject的宽度
    .attr("height", 100) // foreignObject的高度
    .append("xhtml:div") // 注意：D3在append("xhtml:div")时会自动处理命名空间
    .style("width", "100%") // div的宽度填充foreignObject
    .style("height", "100%") // div的高度填充foreignObject
    .style("background", "conic-gradient(from 0deg at 50% 50%, red, green, blue, red)"); 
    // conic-gradient的from参数可以调整起始角度，at调整中心点
    // 这里示例从红色到绿色到蓝色，然后回到红色，形成一个完整的圆周渐变。
    // 你可以根据需要调整颜色和角度，以匹配三角形的三个角。
    // 例如，如果你想让红、绿、蓝分别从三角形的三个角发出，
    // 需要精心调整conic-gradient的stop点和at中心点，以及from角度。
    // 假设三角形的三个顶点是 (x1,y1), (x2,y2), (x3,y3)
    // 可以设置at为三角形的中心点或重心，然后调整颜色stop点来模拟从角发出的效果。
    // 例如：conic-gradient(from 0deg at 50% 50%, red 0deg, green 120deg, blue 240deg, red 360deg)