更改 html 上的 svg 图像背景颜色？

Question

我正在动态显示图像（从 API 获取它们）。他们的背景是透明的（alpha）。我也有背景颜色 I 用于图像的顶部。如何将此背景颜色添加到 html 上的图像？我有一个 Image React class（来自 Semantic-Ui-React）但忽略它。的属性将同样起作用。这里的 "fill" 和 "color" 只是我的尝试，但没有奏效。其余属性无关紧要

             <Image
                align="left"
                color="green"
                fill="red"
                src={image}
                size={this.state.tokenImageSize}
                avatar
                onMouseEnter={e =>
                  this.setState({
                    tokenImageSize: "medium",
                    textHeaderSize: "h1"
                  })
                }
                onMouseLeave={e =>
                  this.setState({
                    tokenImageSize: "tiny",
                    textHeaderSize: "h4"
                  })
                }
              />

Answer 1

在 HTML 元素中更改背景颜色的典型方法是使用 style 属性，并将 background-color 设置为您需要的颜色。

例如，您可以将此属性添加到您的 <image/> 标签中：

style='background-color: blue'

更改 html 上的 svg 图像背景颜色？

Change svg image background color on html?

html

css

reactjs

semantic-ui

semantic-ui-react