SVG内部path元素样式设置失效问题求助

你的问题核心是SVG path元素的内联样式优先级高于CSS——你给path直接写了fill、stroke这些内联属性，外部/内部CSS的样式直接被覆盖，所以不管用类选择器还是直接定位path都没效果。

下面是具体解决步骤：

1. 移除path的内联样式属性 #

把两个path标签里的fill、stroke、stroke-width这些内联属性删掉，让CSS全权控制样式：

<path
  class="circle"
  fill-rule="evenodd"
  clip-rule="evenodd"
  d="M5.5 12.0002C5.50024 8.66068 7.85944 5.78639 11.1348 5.1351C14.4102 4.48382 17.6895 6.23693 18.9673 9.32231C20.2451 12.4077 19.1655 15.966 16.3887 17.8212C13.6119 19.6764 9.91127 19.3117 7.55 16.9502C6.23728 15.6373 5.49987 13.8568 5.5 12.0002Z"
/>
<path
  class="plus"
  d="M9.875 11.2502C9.46079 11.2502 9.125 11.586 9.125 12.0002C9.125 12.4145 9.46079 12.7502 9.875 12.7502V11.2502ZM12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502V12.7502ZM12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502V11.2502ZM15.125 12.7502C15.5392 12.7502 15.875 12.4145 15.875 12.0002C15.875 11.586 15.5392 11.2502 15.125 11.2502V12.7502ZM13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002H13.25ZM11.75 14.6252C11.75 15.0395 12.0858 15.3752 12.5 15.3752C12.9142 15.3752 13.25 15.0395 13.25 14.6252H11.75ZM11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002H11.75ZM13.25 9.37524C13.25 8.96103 12.9142 8.62524 12.5 8.62524C12.0858 8.62524 11.75 8.96103 11.75 9.37524H13.25ZM9.875 12.7502H12.5V11.2502H9.875V12.7502ZM12.5 12.7502H15.125V11.2502H12.5V12.7502ZM11.75 12.0002V14.6252H13.25V12.0002H11.75ZM13.25 12.0002V9.37524H11.75V12.0002H13.25Z"
/>

2. 用CSS设置样式（含交互状态） #

现在可以正常用CSS控制path的填充、描边，还有checkbox选中后的交互效果。注意你之前写的.circle { width: 100px; }无效——path没有width属性，要放大的话可以修改svg的尺寸或者用transform：

svg {
  width: 50px;
  height: 50px;
  transition: 0.5s;
  cursor: pointer;
}
/* 基础样式 */
.circle {
  fill: green;
  stroke: #000;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plus {
  fill: #fff;
}
/* 选中后的交互样式 */
#add:checked ~ label > svg {
  width: 100px; /* 放大整个SVG */
}
#add:checked ~ label > svg > .circle {
  fill: darkgreen; /* 修改填充色 */
  stroke: #333; /* 修改描边色 */
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    svg {
      width: 50px;
      height: 50px;
      transition: 0.5s;
      cursor: pointer;
    }
    .circle {
      fill: green;
      stroke: #000;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .plus {
      fill: #fff;
    }
    #add:checked ~ label > svg {
      width: 100px;
    }
    #add:checked ~ label > svg > .circle {
      fill: darkgreen;
      stroke: #333;
    }
  </style>
</head>
<body>
  <div>
    <input type="checkbox" id="add" />
    <label class="label" for="add">
      <svg
        width="800px"
        height="800px"
        viewBox="0 -0.5 25 25"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          class="circle"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M5.5 12.0002C5.50024 8.66068 7.85944 5.78639 11.1348 5.1351C14.4102 4.48382 17.6895 6.23693 18.9673 9.32231C20.2451 12.4077 19.1655 15.966 16.3887 17.8212C13.6119 19.6764 9.91127 19.3117 7.55 16.9502C6.23728 15.6373 5.49987 13.8568 5.5 12.0002Z"
        />
        <path
          class="plus"
          d="M9.875 11.2502C9.46079 11.2502 9.125 11.586 9.125 12.0002C9.125 12.4145 9.46079 12.7502 9.875 12.7502V11.2502ZM12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502V12.7502ZM12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502V11.2502ZM15.125 12.7502C15.5392 12.7502 15.875 12.4145 15.875 12.0002C15.875 11.586 15.5392 11.2502 15.125 11.2502V12.7502ZM13.25 12.0002C13.25 11.586 12.9142 11.2502 12.5 11.2502C12.0858 11.2502 11.75 11.586 11.75 12.0002H13.25ZM11.75 14.6252C11.75 15.0395 12.0858 15.3752 12.5 15.3752C12.9142 15.3752 13.25 15.0395 13.25 14.6252H11.75ZM11.75 12.0002C11.75 12.4145 12.0858 12.7502 12.5 12.7502C12.9142 12.7502 13.25 12.4145 13.25 12.0002H11.75ZM13.25 9.37524C13.25 8.96103 12.9142 8.62524 12.5 8.62524C12.0858 8.62524 11.75 8.96103 11.75 9.37524H13.25ZM9.875 12.7502H12.5V11.2502H9.875V12.7502ZM12.5 12.7502H15.125V11.2502H12.5V12.7502ZM11.75 12.0002V14.6252H13.25V12.0002H11.75ZM13.25 12.0002V9.37524H11.75V12.0002H13.25Z"
        />
      </svg>
    </label>
  </div>
</body>
</html>

补充说明 #

如果实在不想移除内联属性，也可以用!important强制覆盖，但不推荐——会打乱样式优先级，后期维护麻烦：

.circle {
  fill: red !important;
}

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