如何通过onclick切换类修改SVG路径颜色

问题核心是你SVG里的<path>元素用了内联fill="#FF3D00"，内联样式优先级高于CSS类选择器，导致类样式无法覆盖它。按以下步骤修改即可实现点击切换颜色：

步骤1：调整SVG代码 #

把两个<path>的内联fill="#FF3D00"替换为fill="currentColor"，这样路径颜色会继承父元素的color属性，方便用CSS控制；同时给包裹路径的<g>标签设置默认红色：

<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" viewBox="0 0 21 16" fill="none">
  <g clip-path="url(#clip0_114904_5525)" color="#FF3D00">
      <path d="M19.6528 15.2547C19.4182 15.2551 19.1896 15.1803 19.0007 15.0412L10.7487 8.958L2.49663 15.0412C2.38078 15.1267 2.24919 15.1887 2.10939 15.2234C1.96959 15.2582 1.82431 15.2651 1.68184 15.2437C1.53937 15.2223 1.40251 15.1732 1.27906 15.099C1.15562 15.0247 1.04801 14.927 0.96238 14.8112C0.876751 14.6954 0.814779 14.5639 0.780002 14.4243C0.745226 14.2846 0.738325 14.1394 0.759696 13.997C0.802855 13.7095 0.958545 13.4509 1.19252 13.2781L10.0966 6.70761C10.2853 6.56802 10.5139 6.49268 10.7487 6.49268C10.9835 6.49268 11.212 6.56802 11.4007 6.70761L20.3048 13.2781C20.4908 13.415 20.6286 13.6071 20.6988 13.827C20.7689 14.0469 20.7678 14.2833 20.6955 14.5025C20.6232 14.7216 20.4834 14.9124 20.2962 15.0475C20.1089 15.1826 19.8837 15.2551 19.6528 15.2547Z" fill="currentColor"/>
      <path d="M19.6528 9.50568C19.4182 9.50609 19.1896 9.43124 19.0007 9.29214L10.7487 3.20898L2.49663 9.29214C2.26266 9.46495 1.96957 9.5378 1.68184 9.49468C1.39412 9.45155 1.13532 9.29597 0.962385 9.06218C0.789449 8.82838 0.716541 8.53551 0.7597 8.24799C0.802859 7.96048 0.95855 7.70187 1.19252 7.52906L10.0966 0.958588C10.2853 0.818997 10.5139 0.743652 10.7487 0.743652C10.9835 0.743652 11.212 0.818997 11.4007 0.958588L20.3048 7.52906C20.4908 7.66598 20.6286 7.85809 20.6988 8.07797C20.769 8.29785 20.7678 8.53426 20.6955 8.75344C20.6232 8.97262 20.4834 9.16338 20.2962 9.29847C20.1089 9.43356 19.8837 9.50608 19.6528 9.50568Z" fill="currentColor"/>
  </g>
  <defs>
      <clipPath id="clip0_114904_5525">
          <rect width="20" height="14.5098" fill="white" transform="translate(0.748535 0.745117)"/>
      </clipPath>
  </defs>
</svg>

步骤2：添加CSS样式 #

定义默认颜色和切换后的白色样式：

/* 默认状态：路径为红色 */
svg g {
  color: #FF3D00;
}

/* 点击激活后：路径变为白色 */
svg.active g {
  color: #FFFFFF;
}

步骤3：编写点击切换类的JS代码 #

给SVG元素绑定点击事件，切换active类：

const svg = document.querySelector('svg');
svg.onclick = function() {
  this.classList.toggle('active');
};

替代方案（不修改SVG内联样式） #

如果不想调整SVG代码，可以用!important强制覆盖内联fill，但不推荐（优先级过高不利于后续维护）：

svg.active path {
  fill: #FFFFFF !important;
}

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