如何动态更改SVG填充颜色？

Question

我想动态更改SVG图像的颜色，而不使用内联SVG标签（静态地放置<svg>，<path="...">等），以便用户可以自由地使用任何SVG图像和颜色。

用户只需传递SVG标记的src和颜色十六进制值，我的代码就应该将这些颜色填充动态应用到SVG标记中。

您有什么建议吗？谢谢！

消费者看到的内容：

import Frame from './Frame.svg';
...
<Icon src={Frame} color='purple' />

我对 UI 组件代码的尝试：

import React from 'react';
import styled from 'styled-components';

const Icon = ({ src, color }) => {
  const StyledSVGIcon = styled(src)`
    width: 67px;
    height: 72px; 
    fill: ${color};
  `;
  return <StyledSVGIcon />
};

Frame.svg

<svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
<path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
<path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
<path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
<path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#4B286D"/>
<path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
<path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
<path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
<path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="73" height="71" fill="white"/>
</clipPath>
</defs>
</svg>

- Jpark9061

Answer 1

以下是将颜色传递给SVG的示例：

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("red");

  return (
    <div>
      <h1>Hello Stack Overflow!</h1>
      <StyledSVG 
        color={colorChosen} 
        src={'https://lh3.googleusercontent.com/proxy/CWRs9ihXEx4EMOglFfeT70ir74KeyxILHB6Dkm7oLIufKfeI02Xi6YdNAEbaGwT8LecfPDe_7A6UrKXuyNOi_LpsTVO7jIrqxdPX2vQ2nq2W-re_1IrMZwxgAwoq6t_W5rNx6QEaU96ai2MmJsI'}
        />
    </div>
  );
}

const StyledSVG = styled.svg`
  width: 500px;
  height: 500px;
  background-color: ${(props) => props.color};
  background-image: url(${(props) => props.src});
`;

默认情况下，颜色设置为红色，但通过一些额外的滑块，您可以将 rbq / hex 值传递到样式化的<svg />中。 代码沙盒： https://codesandbox.io/s/stack-63910588-pass-color-to-svg-birthday-card-ievg7?file=/src/App.js

---

OP 澄清说他们想要改变子元素的颜色。在这种情况下，可以使用以下方法：

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [colorChosen, setColorChosen] = useState("green");

  return (
    <Container>
      <StyledSVG color={colorChosen} width="73" height="71" viewBox="0 0 73 71">
        <Frame />
      </StyledSVG>
    </Container>
  );
}

const Frame = () => {

  // This can also be abstracted to its own js file.

  return (
  <>
  <g clip-path="url(#clip0)">
  <path d="M47.0139 71H40.8997C39.8807 71 39.541 70.332 39.541 69.664V63.6518C39.541 63.3178 39.8807 62.6498 39.8807 62.3157L64.3376 38.267C65.0169 37.599 65.6963 37.599 66.3756 38.267L72.4898 44.2792C73.1692 44.9472 73.1692 45.6152 72.4898 46.2833L48.033 70.332C47.6933 70.666 47.0139 71 47.0139 71ZM42.2584 67.9939H46.3346L69.0931 45.6152L65.0169 41.6071L42.2584 63.9858V67.9939Z" fill="#4B286D"/>
  <path d="M64.2117 52.8725C63.8737 52.8725 63.1978 52.8725 62.8598 52.5305L56.7765 46.3739C56.1005 45.6898 56.1005 45.0058 56.7765 44.3217C57.4524 43.6376 58.1283 43.6376 58.8043 44.3217L64.8876 50.4783C65.5635 51.1623 65.5635 51.8464 64.8876 52.5305C65.2255 52.8725 64.5496 52.8725 64.2117 52.8725Z" fill="#4B286D"/>
  <path d="M33.4287 65.4711H2.31425C1.32124 65.4711 0.990234 64.8064 0.990234 64.1417V19.2757C0.990234 18.9434 1.32124 18.2787 1.32124 17.9464L19.1955 0C19.1955 0.33234 19.8575 0 20.1885 0H52.958C53.951 0 54.282 0.664681 54.282 1.32936V43.2043C54.282 44.2013 53.62 44.5336 52.958 44.5336C52.296 44.5336 51.634 43.8689 51.634 43.2043V2.99106H21.1815L3.96928 19.9404V62.48H33.7597C34.7527 62.48 35.0837 63.1447 35.0837 63.8094C35.0837 64.474 34.4217 65.4711 33.4287 65.4711Z" fill="#4B286D"/>
  <path d="M20.1885 20.9374H2.31425C1.32124 20.9374 0.990234 20.2728 0.990234 19.6081C0.990234 18.6111 1.65224 18.2787 2.31425 18.2787H18.5335V1.32936C18.5335 0.33234 19.1955 0 19.8575 0C20.5195 0 21.1815 0.664681 21.1815 1.32936V19.2757C21.5125 20.2728 21.1815 20.9374 20.1885 20.9374Z" fill="#4B286D"/>
  <path d="M38.1892 30.2127C34.1336 30.2127 30.754 28.2953 30.754 25.7389C30.754 24.7802 31.4299 24.4606 32.1058 24.4606C33.1197 24.1411 33.7956 24.7802 33.7956 25.7389C33.7956 26.6975 35.8234 27.6562 38.1892 27.6562C40.5549 27.6562 42.5827 26.378 42.5827 25.4193C42.5827 24.7802 41.5688 23.8215 38.1892 23.5019H37.8512C36.1614 23.1824 30.416 22.2237 30.416 18.7086C30.416 15.8325 33.7956 13.5956 37.8512 13.5956C41.9068 13.5956 45.2864 15.513 45.2864 18.0695C45.2864 19.0281 44.6105 19.3477 43.9345 19.3477C42.9206 19.6672 42.2447 19.0281 42.2447 18.0695C42.2447 17.1108 40.2169 16.1521 37.8512 16.1521C35.4855 16.1521 33.4577 17.4303 33.4577 18.389C33.4577 19.0281 34.4716 19.9868 37.8512 20.3064H38.1892C40.2169 20.6259 45.6243 21.5846 45.6243 25.0997C45.6243 27.6562 42.2447 30.2127 38.1892 30.2127Z" fill="#FFFFFF"/>
  <path d="M22.9547 32.9327H7.45939C6.42637 32.9327 6.08203 32.3285 6.08203 31.7242C6.08203 31.1199 6.77071 30.5157 7.45939 30.5157H22.9547C23.9877 30.5157 24.332 31.1199 24.332 31.7242C24.332 32.3285 23.9877 32.9327 22.9547 32.9327Z" fill="#4B286D"/>
  <path d="M41.275 45.017H8.91115C7.93042 45.017 7.60352 44.4128 7.60352 43.8085C7.60352 43.2042 8.25733 42.6 8.91115 42.6H41.275C42.2558 42.6 42.5827 43.2042 42.5827 43.8085C42.5827 44.4128 41.9289 45.017 41.275 45.017Z" fill="#4B286D"/>
  <path d="M19.9078 57.1024H7.46461C6.42768 57.1024 6.08203 56.4981 6.08203 55.8939C6.08203 55.2896 6.77332 54.6854 7.46461 54.6854H19.9078C20.9447 54.6854 21.2904 55.2896 21.2904 55.8939C21.2904 56.4981 20.9447 57.1024 19.9078 57.1024Z" fill="#4B286D"/>
  <path d="M38.0175 33.2346C37.1049 33.2346 36.8008 32.5632 36.8008 31.8918V10.4071C36.8008 9.40003 37.4091 9.06433 38.0175 9.06433C38.6258 9.06433 39.2341 9.73573 39.2341 10.4071V31.5561C39.2341 32.5632 38.6258 33.2346 38.0175 33.2346Z" fill="#4B286D"/>
  </g>
  <defs>
  <clipPath id="clip0">
  <rect width="73" height="71" fill="white"/>
  </clipPath>
  </defs>
  </>
  );
  
};

const Container = styled.div`
  height: 500px;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

`;

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;

- Harley Lang

---

谢谢您的解决方案！但是，src应该放在哪里？ - Jpark9061

当然，很乐意帮忙！请查看src的更新。添加图像的方法与添加颜色的方法相同。 - Harley Lang

你有本地导入SVG文件的版本吗？我在问题中发布了本地SVG文件的样式。 - Jpark9061

在您的头部，您可以使用import MyFile from './path/to/img.file';，然后使用src={MyFile}引用它。 - Harley Lang

注意，SVG 获得 73 像素的固定宽度，而 SVG 路径具有 4 位数字精度...这意味着你正在把10,000 像素精度塞入一个像素中。你可以丢弃所有精度；或者（为保持输出中的 1 位数字精度）将所有路径和 viewBox 乘以 10，使 SVG 解析器不必使用浮点数进行计算。 - Danny '365CSI' Engelman