时间戳

首页 > 解决方案 > How to pull an SVG linearGradient id from a map function

reactjs - How to pull an SVG linearGradient id from a map function

问题描述

I need to create a dynamic svg semi circle gauge with a linearGradient that reacts to changes in value. For the time being, these angles are passed as props and hardcoded.

I have an arc component that defines the semi circle. The arc is then rendered into the parent component that receives additional props.

I have defined a color's array which holds my gradient colors, in the parent component, I map through the colors array (three colors) and for each one, i render a element with the contained attributes. I set the id dynamic using id={linearColors${index}}.

Now still in my parent component I again map through the colors and for each, render an arc component then pass it the attributes.

My question is, how can i access the linearGradient id from outside the map function to use as a stroke property in my arc map method?

The angle points for each stop are already defined. Will this method work?

var colForGradient = <G>{colors.map((color, index) => {
            const nextCol = colors[index + 1]
            if (!nextCol) {
                return null
            }
            console.log(nextCol, 'nextCol')
            console.log(color, 'color')
            return (

                <linearGradient key={index} id={`linearColors${index}`} x1={angles[0]} y1={angles[1]} x2={angles[2]} y2={angles[3]}>
                    <stop offset="0" stop-color={color}></stop>
                    <stop offset="1" stop-color={nextCol}></stop>
                </linearGradient>

)
// convert value to boolean and negate to true
}).filter((comp) => !!comp)
}</G>

var arcs = <G>{colors.map((color, i) => <Arc
            // style={"stroke: "}
            cx={256}
            cy={256}
            key={i}
            stroke={(id) => colForGradient(id)}
            strokeWidth={strokeWidth}
            color={color}
            startAngle={angles[i]}
            endAngle={angles[i + 1]}
            transform={transformCircleToDialFromDown}
            onClick={() => arcClick(i)}
            className="hover-highlight"
        />)}</G>;

标签： reactjssvglinear-gradients

解决方案

所以我设法通过渲染 colForGradient 并将 arcs 中的 color prop 引用为 color={ url(#linearColors${i})} 来将 id 引用传递给 arcs。我现在遇到的问题是渐变没有动态显示。在日志中，弧似乎接受角度点作为偏移量和 linearGradient 的 id

 var colForGradient = <G>{colors.map((color, index) => {
            const nextCol = index < index.length - 1 ? colors[index + 1] : colors[index]
            if (!nextCol) {
                return null
            }
            console.log(nextCol, 'nextCol')
            console.log(color, 'color')
            return (

                <linearGradient key={index} id={`linearColors${index}`} x1="1" y1="0" x2="0" y2="1">
                    <stop offset={angles[index]} stop-color={color}></stop>
                    <stop offset={angles[index + 1]} stop-color={nextCol}></stop>
                </linearGradient>
            )
            // convert value to boolean and negate to true
        }).filter((comp) => !!comp)
    }</G>

    console.log(colForGradient, 'colgrad')


        // define linear gradients in array and map over them, rendering each path?
        var arcs = <G>{colors.map((color, i) => <Arc
            cx={256}
            cy={256}
            key={i}
            strokeWidth={strokeWidth}
            color={`url(#linearColors${i})`}
            stroke={`url(linearColors${i})`}
            startAngle={angles[i]}
            endAngle={angles[i + 1]}
            transform={transformCircleToDialFromDown}
            onClick={() => arcClick(i)}
            className="hover-highlight"
            />
            )
        }</G>;

推荐阅读