Question

我在javascript中使用path绘制多边形，我想用线性渐变填充它。不幸的是它不起作用，反过来整个形状变成黑色。我知道它适用于rect，

有关如何解决问题的任何想法？

    <g>
        <defs>
            <linearGradient id="LineChartGradient">
                <stop offset="5%"  stopColor="green"/>
                <stop offset="95%" stopColor="gold"/>
            </linearGradient>
        </defs>
        <path d={path(fillPoints)} stroke={color} strokeWidth='0' fill='url(#LinearChartGradient)' fillOpacity='0.5'/>
    </g>

（注意：我使用的是反应，因此属性名称与正常情况略有不同！它不会影响html结构。正如我所说，我尝试使用rect并且它有效）

Answer 1

看起来我们无法将线性渐变填充添加到path创建的多边形中。我所做的是使用polygon代替path。

Answer 2

您在填写声明中输了一个错字。 ID与定义中的ID不同。将其更改为fill='url(#LineChartGradient)'。此外，您的元素使用了不正确的stopcolor属性。请改用stop-color。有关更好的了解，请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

使用渐变填充路径多边形

2 个答案: