开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在img标签中更改svg源的颜色？

要在img标签中更改SVG源的颜色，您可以将SVG文件嵌入到HTML中，然后使用内联CSS或外部样式表更改颜色

方法1：内联CSS

<!DOCTYPE html>
<html>
<head>
    <style>
      .custom-svg path {
        fill: red; /* 更改颜色为红色 */
      }
    </style>
</head>
<body>
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' class='custom-svg'/></svg>" alt="SVG Image">
</body>
</html>

方法2：<object>标签

<!DOCTYPE html>
<html>
<head>
    <style>
      .custom-svg path {
        fill: red; /* 更改颜色为红色 */
      }
    </style>
</head>
<body>
  <object data="path/to/your/svg-file.svg" type="image/svg+xml">
    <style>
      .custom-svg path {
        fill: red; /* 更改颜色为红色 */
      }
    </style>
  </object>
</body>
</html>

相关搜索:在img标签中单击时更改svg图像颜色 jQuery更改<img>标签的源如何在jQuery中更改活动img源时更改类如何在Angular中更改svg元素的颜色？加载到img标签中的Svg为空如何在react中更改svg图标颜色 Svg在html <img>标记中显示错误的颜色如何在Ionic 5中更改SVG填充颜色如何在React中更改外部导入的SVG的颜色？我想改变svg的颜色，当它在外部文件中，并用img标签导入部件标签中的颜色更改 SVG:如何在外部svg精灵中更改元件的“填充”颜色如何在'treemapify‘中更改标签颜色/大小如何在react native上更改SVG的颜色？如何在MathJax-Node中更改SVG的默认颜色如何在HTML中更改链接标签文本的颜色？如何在TextField Flutter中更改标签的文本颜色如何在<symbol>标签未启用的情况下更改悬停时的svg颜色？当包装在<a>标签中时，导入的带有<img>标签的SVG消失了？如何在ToggleButton中更改选择上的SVG图标颜色

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的视频

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭