如何在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，宽度和高度