Как получить все пути svg в функциональном компоненте React? - PullRequest
Новая
       39

Как получить все пути svg в функциональном компоненте React?

0 голосов
/ 21 июня 2020

У меня проблемы с получением ссылок на все пути в svg. Изображение SVG определяется как <object ref={svgObject} className="sun" aria-label="sun" data="/img/sun.svg" type="image/svg+xml"></object>.

Код, который работает внутри функционального компонента: 

window.addEventListener('load', () => {
 const sun = document.querySelector('.sun');
 const svgObj = sun.getSVGDocument()
 const paths = svgObj.querySelectorAll('path')

 const timeline = gsap.timeline()
 timeline.to('.sun', 1, {
  scale: 2
 })
})

Код, который не работает: 

useEffect(() => {
 console.log(svgObject.current) // works, console logs object tag 
 console.log(svgObject.current.getSVGDocument()) // console logs null
 console.log(svgObject.current.querySelector('path')) // console logs null
}, [svgObject])

Когда я попробуйте сделать то же самое с помощью useRef и useEffect, нет метода getSVGDocument. Как выбрать все пути из образа svg с помощью React?

...