反应js svg linearGradient无法呈现正确的值

Question

我有一个要在其中渲染SVG路径的组件，以及一个通过父组件从静态数据提供的linearGradient值。该属性称为“ startColor”和“ stopColor”，主要用于渐变的开始和停止颜色。

当我控制台记录每个对象的值时，它们是正确的，但是它们未按预期呈现。请注意dataTwo对象的值不同。

我怀疑从第一个对象渲染的第一个值是所有组件使用的值。我已经测试过了，似乎是这样。

如何获得每个圆以渲染数据中提供的正确渐变颜色？

数据结构：

    const dataOne = [
    {
        title: 'Cpu utilisation',
        graph: 65,
        noBorder: false,
        noMargin: false,
        startColor: '#2DC0FF',
        stopColor: '#0160B2'
    },
    {
        title: 'Memory utilisation',
        graph: 65,
        noBorder: true,
        noMargin: true,
        startColor: '#2DC0FF',
        stopColor: '#0160B2'
    },
]

const dataTwo = [
    {
        title: 'Warnings today',
        graph: 65,
        noBorder: false,
        noMargin: false,
        startColor: '#fa9100',
        stopColor: '#ffc14f'
    },
    {
        title: 'Errors today',
        graph: 65,
        noBorder: true,
        noMargin: true,
        startColor: '#fa9100',
        stopColor: '#ffc14f'
    },
]

组件用法：

<div className="tab-info-body large">
    <DoubleGraph data={dataOne} />                              
</div>
<div className="tab-info-body large">
    <DoubleGraph data={dataTwo} />                              
</div>

组件代码：

render() {
        const { data, title, startColor, stopColor } = this.props;
        const { value, valueOne, valueTwo, hidden, visible, valueOneYPos, valueTwoYPos, valueOneHidden, valueTwoHidden, dashArray, dashArrayBorder } = this.state;
        const styleOne = { transform: `translate(0px, ${valueOneYPos}px)` };
        const styleTwo = { transform: `translate(0px, ${valueTwoYPos}px)` };

        return (
            <div className="double-graph-wrap">
                <div className="flex">
                    {data.map((item, i) => {
                        console.log("give me colour", item.startColor)
                        return (
                            <div className={classNames('wrap', { noBorder: item.noBorder, noMargin: item.noMargin})}>
                                {i === 1 &&<div className="border-test"></div>}
                                <span className="title">{item.title}</span>
                                <div className="graph-wrap">
                                    <div className="graph">
                                        <div className="value-wrap">
                                            <div className="values">
                                                <span style={styleOne} className={classNames("valueOne", {hidden: valueOneHidden})}>{valueOne}</span>
                                                <span style={styleTwo} className={classNames("valueTwo", {hidden: valueTwoHidden})}>{valueTwo}</span>
                                            </div>
                                        </div>
                                        <div class="single-chart">
                                            <div style={{ background: 'black', width: 100, height: 100}}>{item.startColor}</div>
                                            <svg viewBox="0 0 36 36" class="circular-chart orange">
                                            <defs>
                                              <linearGradient id='grad'>
                                                <stop stop-color={item.startColor} />
                                                <stop offset='100%' stop-color={item.stopColor} />
                                              </linearGradient>
                                              </defs>
                                                <path class="circle-bg"
                                                    d="M18 2.0845
                                                    a 15.9155 15.9155 0 0 1 0 31.831
                                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                                />
                                                    <path class="borderTwo"
                                                    stroke-dasharray={dashArrayBorder}
                                                    d="M18 2.0845
                                                    a 15.9155 15.9155 0 0 1 0 31.831 
                                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                                />
                                                <path class="circle"
                                                    stroke-dasharray={dashArray}
                                                    d="M18 2.0845
                                                    a 15.9155 15.9155 0 0 1 0 31.831 
                                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                                />
                                                <path class="borderOne"
                                                    stroke-dasharray="1, 100"
                                                    d="M18 2.0845
                                                    a 15.9155 15.9155 0 0 1 0 31.831 
                                                    a 15.9155 15.9155 0 0 1 0 -31.831"
                                                />
                                                <path class="average"
                                                stroke-dasharray="1, 100"
                                                    d="M18 2.0845
                                                    a 15.9155 15.9155 0 0 1 0 31.831"
                                                />
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }

Answer 1

我也遇到了这个问题，提到的问题和解决方法Filth对我很有帮助。

这里的真正问题是浏览器希望该ID是唯一的。其结果可能取决于浏览器（我们注意到chrome和safari之间存在差异）。

具有相同的ID（see it here）对铬中的所有圆使用相同的颜色渐变（83.0.4103.97 debian）。

您实际上可以通过运行document.getElementById（“ yourid”）看到这一点，您应该注意到该元素是用于所有渐变的元素。

注意：为简化起见，我添加了一个填充。

                        <path
                      class="average"
                      stroke-dasharray="1, 100"
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831"
                      fill={`url(#${item.id})`}

此问题的解决方法是使用唯一的ID作为填充see it working here