[SVG]修改固定颜色为填充颜色

主要思路是把 fill 和 stroke 改成 currentColor,具体有空补充。(咕~)
需要注意fill-opacity, stroke-width等等属性

 

修改之前:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
    <rect fill="#C8C8C8" transform="rotate(-90 17 23)" x="12" y="22" width="10" height="2" rx="1"/>
    <rect fill="#C8C8C8" transform="rotate(-90 12 21)" x="5" y="20" width="14" height="2" rx="1"/>
    <rect fill="#C8C8C8" transform="rotate(-90 22 21)" x="15" y="20" width="14" height="2" rx="1"/>
    <rect fill="#C8C8C8" transform="rotate(-90 27 19)" x="18" y="18" width="18" height="2" rx="1"/>
    <rect fill="#C8C8C8" transform="rotate(-90 7 19)" x="-2" y="18" width="18" height="2" rx="1"/>
    <rect stroke="#757575" stroke-width="2" x="1" y="1" width="32" height="26" rx="4"/>
    <rect stroke="#757575" stroke-width="2" x="1" y="33" width="32" height="1" rx=".5"/>
  </g>
</svg>

 

修改之后:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
    <rect fill="currentColor" fill-opacity="0.5" transform="rotate(-90 17 23)" x="12" y="22" width="10" height="2" rx="1"/>
    <rect fill="currentColor" fill-opacity="0.5" transform="rotate(-90 12 21)" x="5" y="20" width="14" height="2" rx="1"/>
    <rect fill="currentColor" fill-opacity="0.5" transform="rotate(-90 22 21)" x="15" y="20" width="14" height="2" rx="1"/>
    <rect fill="currentColor" fill-opacity="0.5" transform="rotate(-90 27 19)" x="18" y="18" width="18" height="2" rx="1"/>
    <rect fill="currentColor" fill-opacity="0.5" transform="rotate(-90 7 19)" x="-2" y="18" width="18" height="2" rx="1"/>
    <rect stroke="currentColor" stroke-width="2" x="1" y="1" width="32" height="26" rx="4"/>
    <rect stroke="currentColor" stroke-width="2" x="1" y="33" width="32" height="1" rx=".5"/>
  </g>
</svg>

 

posted @ 2024-04-09 10:52  夕苜19  阅读(48)  评论(0编辑  收藏  举报