[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>