M
M
mr jeery2018-06-28 16:03:15
JavaScript
mr jeery, 2018-06-28 16:03:15

How to write handleSubmit to change svg attribute in React?

With react-samy-svg I add svg and can change attributes in svg. I want to write a handleSubmit that will detect the svg that called it and change the stroke.
Added svg, which consist of elements (pictures, shapes, text)

handleSubmit(event) {

        console.log("event", event.target.id)
        let card = document.getElementById(event.target.id)
        console.log("getD",card)
   

    }

 render() {
        return (
            <div>
                <div className="banners" onClick={this.handleSubmit}>
                        <Samy svgXML={fuagra}>
                            <SvgProxy className="" selector="#Fuagra-border-1" stroke={this.state.strokeFuagra}/>
                            <SvgProxy selector="#Fuagra-border-2" stroke={this.state.strokeFuagra} />
                        </Samy>;
                        <Samy svgXML={fish}>
                            <SvgProxy selector=".shp2-2 " stroke={this.state.strokeFish} />
                            <SvgProxy selector=".shp3-2 " stroke={this.state.strokeFish} />
                        </Samy>;
                        <Samy svgXML={chicken}>
                            <SvgProxy selector=".shp2" stroke={this.state.strokeFuagra} />
                            <SvgProxy selector=".shp3" stroke={this.state.strokeFuagra} />
                        </Samy>;
                </div>
            </div>
        )
    }

Problem 1:
When clicking on an svg, event.target is assigned to specific elements - an image inside the svg, text, a shape, etc.
And I would like to get e-t or to easily change the attribute.
Problem 2:
I went the other way.
Let's say I found the right element, and I see the right attribute in the console.log, but if I call it directly, undefined is returned
5b34dc7f67fa4676496591.png
let card = document.getElementsById(event.target.id)
    console.log("card",card)
    console.log("card.stroke",card.stroke)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-06-28
@jeerjmin

When clicking on an svg, event.target is assigned to specific elements - an image inside the svg, text, a shape, etc.

card.getAttribute('stroke')

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question