如何在 SVG 标签中自定义 PNG 图像？

Question

我正在尝试更改 SVG 标记中 png 图像的颜色。我有透明类型的PNG。我需要根据用户选择的颜色自定义PNG中的颜色。因为有一些功能，您可以更改不同部分的颜色。那么如何做到这一点呢？有没有人可以帮助我？

  <HoodieSvg
    backgound="red"
    width="800"
    height="800">
    <image href={lights} width="400" height="400" fill="#000"/>
    <image href={model} width="400" height="400" />
    <image href={shadows} width="400" height="400" />
  </HoodieSvg>

import React from 'react'

const HoodieSvg = (props) => {

return (
  <svg
    {...props}
    xmlns="http://www.w3.org/2000/svg"
  >
    {props.children}
  </svg>
)
}

 export default HoodieSvg

Answer 1

与常规的 SVG 元素不同，我认为不可能在 svg 标记内更改 PNG 图像的颜色。根据 Mozilla 文档，svg/image 属性是 x、y、width 和 height