You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:将SVG复选框的镂空对勾改为绿底白勾效果

解决SVG镂空对勾转绿底白勾的问题

你的SVG之所以呈现镂空对勾,是因为它用了单个复合路径+evenodd填充规则,通过反向绘制对勾路径实现透明效果。要改成绿底白勾,只需把复合路径拆成两个独立元素:绿色圆形背景和白色对勾。

修改后的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512" viewBox="0 0 254000 254000" xml:space="preserve">
  <g>
    <!-- 绿色圆形背景 -->
    <path fill="#48b02c" d="M127000 254000C56871 254000 0 197129 0 127000S56871 0 127000 0s127000 56871 127000 127000-56871 127000-127000 127000z"/>
    <!-- 白色对勾 -->
    <path fill="#ffffff" d="M109527 149346l76212-76211c2637-2638 6967-2611 9578 0l8642 8642c2611 2611 2611 6968 0 9578l-89509 89510c-1601 1601-3850 2231-5957 1869-1442-181-2833-814-3919-1899l-54525-54525c-2606-2606-2637-6941 0-9579l8642-8642c2638-2637 6941-2637 9579 0z"/>
  </g>
</svg>

关键修改点

  • 拆分原复合路径为两个独立<path>:一个负责绿色圆形背景,一个负责白色对勾
  • 把对勾路径开头的zm改为M(绝对定位命令),修正路径起始位置
  • 使用你原SVG标注的data-original="#48b02c"作为背景色,对勾设为纯白色#ffffff
  • 移除了不需要的fill-rule="evenodd"和冗余属性,简化代码

内容的提问来源于stack exchange,提问作者mchl18

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 04:48:33