在挂起的svg图表后添加一个渐变

问题描述：

你好我正在用Plotly创建图表，并希望我的区域图表具有渐变而不是不透明的标准填充。在挂起的svg图表后添加一个渐变

我建立使用我的图表：

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看起来像：

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

你实际上没有问一个问题。问题是什么？我们可以假设你的渐变没有显示出来吗？ –

答

您的渐变定义缺少定位信息。从哪里到哪里应该渐变？例如，为了定义一个梯度，可让从底部颜色变化到图表区域的顶部：

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

，以确保Style获取应用。

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

在挂起的svg图表后添加一个渐变

相关推荐