#reactjs #image #svg #puppeteer
#reactjs #изображение #svg #кукловод
Вопрос:
У меня есть тег изображения, который используется для импорта SVG-изображения (он динамически извлекается из набора возможных SVG, которые может выбрать клиент, и цвет изображения обязательно должен быть черным для всех путей выбранного SVG).
<svg>
<!-- some more SVG elements -->
<image href={selectedSvgImagePath} />
<!-- some more SVG elements -->
</svg>
В React это работает хорошо и отлично отображается. Это означает, что выбранное SVG-изображение отображается и отображается правильно.
Затем я использую Puppeteer для рендеринга страницы в формате PDF, и мне нужно изменить цвет для этого конкретного selectedSvgImagePath тега. Я попытался добавить fill="blue" тег к <image> тегу следующим образом.
<image fill="blue" href={selectedSvgImagePath} />
Но это не изменило цвет импортированного SVG-изображения. Каков наилучший способ сделать это?
Комментарии:
1. создайте синюю версию изображения и измените ссылку на это изображение.
2. Я отредактирую свой ответ, но, к сожалению, у меня есть только контроль над форматом изображения, а не над цветом (все они являются обязательными путями, заполненными черным цветом).