背景外部 svg

Answer 1

您无法对

<img src=""

执行此操作，因为全局 CSS 无法对图像的 inside 进行样式设置。

另一种方法是自己加载 SVG，并将其注入到 DOM 中，这样就可以应用 CSS

<script src="https://load-file.github.io/element.js"></script>

<load-file src="https://svg-cdn.github.io/heart.svg">
  <style shadowRoot>
    svg {
      background: gold;
      width: 160px
    }
    
    path {
      fill: green
    }
  </style>
</load-file>

<style>
  svg {
    background: pink;
    width: 150px
  }
  
  path {
    fill: gold
  }
</style>
<load-file replaceWith src="https://svg-cdn.github.io/simpleheart.svg">
  </load-file

我写了一篇关于

<load-file>

Web 组件的 Dev.to 帖子：https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd