如何修改通过<img>标签引入的.svg图片样式，<object>标签修改不生效怎么办

使用<img>标签引入的SVG属于外部静态资源，浏览器会将其作为普通图片渲染，无法通过当前页面的CSS访问SVG内部DOM节点，因此无法直接修改样式。以下是几种可行的实现方案：

直接把SVG源文件里的<svg>...</svg>代码复制粘贴到你的HTML文件中，不需要通过标签引入外部文件，SVG内部的path、circle等元素可以直接被当前页面的CSS选中修改。
示例：

<!-- 直接内联SVG代码，可加自定义类名 -->
<svg class="speedometer-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
  <!-- 其余SVG内部代码 -->
</svg>

对应的CSS：

.speedometer-icon {
  width: 24px;
  height: 24px;
}
.speedometer-icon path {
  fill: #f00; /* 修改填充色 */
  stroke: #333; /* 修改描边色 */
  stroke-width: 1.5; /* 修改描边宽度 */
}

如果你不想把大量SVG代码内联到HTML里，只需要修改单色图标的颜色，可以使用mask属性实现：
HTML代码：

<div class="speedometer-icon"></div>

对应的CSS：

.speedometer-icon {
  width: 24px;
  height: 24px;
  background-color: #165DFF; /* 此处颜色即为图标最终显示的颜色 */
  -webkit-mask: url('src/icons/speedometer-outline.svg') no-repeat center / contain;
  mask: url('src/icons/speedometer-outline.svg') no-repeat center / contain;
}

该方案兼容性覆盖所有现代浏览器，不需要修改SVG源文件，也不需要内联代码。

<object id="speedometer" data="src/icons/speedometer-outline.svg" type="image/svg+xml"></object>

const svgObj = document.getElementById('speedometer');
svgObj.onload = function() {
  // 获取SVG内部文档对象
  const svgDoc = svgObj.contentDocument;
  // 方式1：直接修改元素属性
  const path = svgDoc.querySelector('path');
  path.setAttribute('fill', '#f00');
  // 方式2：给SVG内部插入自定义样式表
  const customStyle = svgDoc.createElement('style');
  customStyle.textContent = `
    path {
      fill: #f00;
      stroke: #333;
    }
  `;
  svgDoc.documentElement.appendChild(customStyle);
}