svg которую я получаю из базы данных?
такой вариант например не работает
<img src={data.image}></img>
А такой не подходит так как svg я получаю с сервера
import { ReactComponent as Logo } from './logo.svg'
<Logo />
Зачем тебе получать fill?
Мне нужно менять цвет изображения, но filter не подходит, так какнакладывется на все изображение а не только на заполняемую часть
Поменяй в свг значение fill на currentColor И меняй color у родителя Условно в див закинуть свг и у дива меня цвет
Так а каким образом я его поменяю если мне приходит как svg изображение с сервера
Нет доступа к свг? Я вижу ты делаешь импорт Значит знаешь где лежит свг
Я не делаю импорт, а получаю svg с сервера
Ссылкой на изображение?
есть либа svg-inject
Мне интересно стало, заставь это ререндериться. в консоли fill меняется, но изменение применяется, только если в кодсандбокс сделаю изменение в коде(перенос строки, например) import SvgImg from "../assets/banner.svg"; import SVGInject from "svg-inject"; import { useLayoutEffect, useReducer } from "react"; export default function App() { const [_, forceUpdate] = useReducer((x) => x + 1, 0); useLayoutEffect(() => { const svg1 = document.querySelector(".svgImg"); svg1.addEventListener("load", function () { return SVGInject(this); }); const path = svg1.querySelector("path"); path?.removeAttribute("fill"); path?.setAttribute("fill", "green"); forceUpdate(); console.log(path); }, []); return ( <> <img className="svgImg" src={SvgImg} alt="" /> </> ); }
Если тебе нужно обновить компонент основанный на массиве, то просто замапь его по новому, можешь даже функцию создать: function reloadComponent(set) { set(s => s.map(d => d)); } Где set - стейт
Обсуждают сегодня