如何在Inkscape导出的SVG中通过ID获取元素并修改颜色？

先解决核心前提：给SVG元素设置ID #

Inkscape默认不会给绘制的圆形、方形、星形自动分配ID，这是你用getElementById返回null的最常见原因。打开你的SVG文件，在Inkscape中选中每个要修改的元素，打开「对象属性」面板（快捷键Ctrl+Shift+O），给它们设置唯一的ID，比如circle1、rect1、star1。

直接在SVG内部写入JavaScript的正确写法 #

直接在浏览器中打开SVG文件时，全局的document就是当前的SVG文档对象，不需要用废弃的svgDocument。关键要确保脚本在SVG元素加载完成后执行，避免获取元素时返回null。

完整的SVG示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <!-- 带ID的图形元素 -->
  <circle id="circle1" cx="100" cy="100" r="50" fill="#ff0000" />
  <rect id="rect1" x="150" y="150" width="100" height="100" fill="#00ff00" />
  <polygon id="star1" points="250,50 270,120 340,120 285,160 305,230 250,190 195,230 215,160 160,120 230,120" fill="#0000ff" />
  
  <script type="text/javascript"><![CDATA[
    // 等待SVG文档加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 修改圆形颜色
      const circle = document.getElementById('circle1');
      if (circle) {
        circle.setAttribute('fill', '#ffff00'); // 改用setAttribute操作SVG属性
      }

      // 修改方形颜色（也可以用style属性）
      const rect = document.getElementById('rect1');
      if (rect) {
        rect.style.fill = '#ff00ff';
      }

      // 修改星形颜色
      const star = document.getElementById('star1');
      if (star) {
        star.setAttribute('fill', '#00ffff');
      }
    });
  ]]></script>
</svg>

常见错误排查 #

• 元素无ID：必须手动给目标元素设置ID，Inkscape不会自动生成。
• 脚本执行过早：如果脚本放在SVG顶部，元素还没被解析，getElementById会返回null，一定要通过DOMContentLoaded事件延迟执行。
• 误用svgDocument：旧版SVG API的svgDocument已经被废弃，直接用全局document即可。
• 属性操作方式错误：SVG元素的fill是XML属性，用setAttribute('fill', 颜色值)更稳妥；部分场景也可以用style.fill，但要注意兼容性。

补充：HTML嵌入SVG时的写法（如果需要） #

如果是在HTML页面中通过<object>或<embed>嵌入SVG，需要先获取SVG的文档对象：

<object id="svgContainer" data="your-svg-file.svg" type="image/svg+xml" width="400" height="400"></object>
<script>
  document.getElementById('svgContainer').addEventListener('load', function() {
    const svgDoc = this.contentDocument;
    const circle = svgDoc.getElementById('circle1');
    circle.setAttribute('fill', '#ffff00');
  });
</script>

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