首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

方法1:内联CSS

代码语言:javascript
复制
<!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>标签

代码语言:javascript
复制
<!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>
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券