在svg图表之后附加一个渐变

Question

您好我正在使用Plotly创建图表，并希望我的区域图表具有渐变而不是标准填充不透明度。

我使用以下方式构建图表：

Plotly.newPlot(className, chartData, layout, {displayModeBar: showModeBar});

构建图表时，图表周围的dom如下所示：

然后我使用以下代码创建渐变部分：

function createGradient() {
    var svg = document.getElementById('line-chart-impressions').getElementsByClassName('trace')[0];
    var fillChange = document.getElementById('line-chart-impressions').getElementsByClassName('js-tozero')[0];

    var defs = document.createElement('defs');
    var linearGradient = document.createElement('linearGradient');
    linearGradient.setAttribute('id', 'gradient');

    var stop1 = document.createElement('stop');
    stop1.setAttribute("offset", "5%");
    stop1.setAttribute("stop-color", "#FFC338");

    var stop2 = document.createElement('stop');
    stop2.setAttribute("offset", "100%");
    stop2.setAttribute("stop-color", "#FFEA68");

    svg.appendChild(defs);
    defs.appendChild(linearGradient);
    linearGradient.appendChild(stop1);
    linearGradient.appendChild(stop2);

    fillChange.setAttribute('fill', 'url(#gradient)');
}

之后，dom看起来像：

我怀疑这是因为我稍后追加了渐变，但我真的想知道是否有解决方案。我的图表没有这样的填充。

Answer 1

您的渐变定义缺少定位信息。渐变从哪里到哪里变化？例如，要定义一个渐变，让颜色从图表区域的底部到顶部发生变化：

<linearGradient id="gradient" gradientUnits="objectBoundingBox"
                x1="0" x2="0" y1="1" y2="0">
    <stop offset="5%" stop-color="#FFC338" />
    <stop offset="100%" stop-color="#FFEA68" />
</linearGradient>

x1，y1，x2，y2定义了一条线的起点和终点，沿着该线逐渐改变颜色。要着色的区域中的每个点都将获得该线上距离它最近的点的颜色。

您可以表示与区域边界框相关的坐标（默认情况下，gradientUnits="objectBoundingBox"可以保留），或者在gradientUnits="userSpaceOnUse"的用户空间坐标中。阅读进一步的调整here。

从您的屏幕截图中，您似乎已使用开发人员工具禁用了style属性。请注意，演示文稿属性fill="url(#gradient)"的特异性低于style="fill:rgb(255, 255, 255);"。你应该使用

fillChange.style.fill = "url(#gradient)"

确保样式得到应用。

屏幕截图显示了元素lineargradient（注意小写字母）。它必须是linearGradient，因为您发布的脚本定义了。检查你真正执行的是什么。