如何在HTML样式表中正确引用img嵌入的SVG路径并修改样式？

当你用<img>标签嵌入SVG时遇到样式无法生效的问题，其实是很常见的情况，主要有两个核心原因：

1. 为什么外部CSS无法选中<img>里的SVG元素？ #

用<img>引入的SVG会被浏览器当作独立的外部资源，它拥有自己的文档上下文，和你的主HTML文档完全隔离。这就意味着主HTML里的CSS选择器根本无法穿透<img>去选中SVG内部的元素——哪怕你写对了ID选择器也没用。

另外还有个小细节：你用了color: blue，但SVG的<path>元素是靠stroke（描边颜色）和fill（填充颜色）来控制外观的，color属性对SVG路径基本不起作用，这也是样式没效果的一个关键因素。

可行的解决方案 #

方案一：将SVG内联到HTML中 #

把SVG代码直接写在HTML文档里，而不是用<img>引入。这样SVG和HTML共享同一个文档上下文，你的CSS就能直接选中内部的路径元素了。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #mySVGPath {
      stroke: blue; /* 控制描边颜色 */
      fill: lightblue; /* 控制填充颜色 */
    }
  </style>
</head>
<body>
  <!-- 直接内联SVG代码 -->
  <svg width="100px" height="50px" version="1.1">
    <title>mySVG</title>
    <g id="mySVG" stroke="none" >
      <path d="M10,10 L90,10 L90,40 L10,40 Z" id="mySVGPath"></path>
    </g>
  </svg>
</body>
</html>

方案二：在SVG内部添加样式 #

如果必须保持SVG为独立文件，可以直接在SVG文件里嵌入<style>标签，这样不管用什么方式引入（<img>、<object>等），样式都会生效。

修改后的bar.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="50px" version="1.1">
  <title>mySVG</title>
  <style type="text/css">
    #mySVGPath {
      stroke: blue;
      fill: lightblue;
    }
  </style>
  <g id="mySVG" stroke="none" >
    <path d="some path" id="mySVGPath"></path>
  </g>
</svg>

然后HTML里继续用<img src="foo/bar.svg">引入即可。

方案三：使用<object>标签替代<img> #

如果你想保留SVG文件的独立性，同时用外部CSS/JS控制样式，可以用<object>标签引入SVG，然后通过JavaScript来操作内部元素。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 可给object容器设置基础样式 */
  </style>
</head>
<body>
  <object id="mySvgObject" data="foo/bar.svg" type="image/svg+xml" width="100" height="50"></object>

  <script>
    // 等待object加载完成
    document.getElementById('mySvgObject').addEventListener('load', function() {
      // 获取SVG文档对象
      const svgDoc = this.contentDocument;
      // 选中目标path并修改样式
      const targetPath = svgDoc.getElementById('mySVGPath');
      targetPath.setAttribute('stroke', 'blue');
      targetPath.setAttribute('fill', 'lightblue');
    });
  </script>
</body>
</html>

这个方法适合需要动态修改SVG样式的场景，比如根据用户交互改变颜色。

内容的提问来源于stack exchange，提问作者n0stalghia