修改svg图片底色

前提条件：开发中在墨刀原型图拿到图标或图片，一般是svg图片，但是直接使用F12拿元素的方式把元素放在页面上，底色就会变成黑色

如果想要修改图片底色，可以通过path标签的fill属性决定，单色情况下可以直接赋颜色值

<path
   fill="red"
   d="M15.626 20.992l-4.025 10.485-1.726-3.876-3.876 1.726 3.978-10.363c1.581 1.202 3.53 1.945 5.648 2.028v0zM22.074 18.964l3.978 10.363-3.876-1.726-1.726 3.876-4.025-10.485c2.119-0.083 4.068-0.826 5.648-2.028v0 0zM16.026 20c4.971 0 9-4.029 9-9s-4.029-9-9-9c-4.971 0-9 4.029-9 9s4.029 9 9 9v0zM16.026 13.692l-3.5 2.308 1.5-4-3-2h3.5l1.5-4 1.5 4h3.5l-3 2 1.5 4-3.5-2.308z">
</path>

如果想要渐变颜色，一般直接复制都会包含原型图人的样式，主要注意需要在fill属性中使用url(#id)把样式渲染上去，其中id是linearGradient中的id

<svg
        xmlns="http://www.w3.org/2000/svg"
        class="styles__StyledSVGIconPathComponent-sc-gbp7ch-0 eFkzfU svg-icon-path-icon fill"
        viewBox="0 0 32 32"
        width="86"
        height="86"
      >
        <defs data-reactroot="">
          <linearGradient
            id="illxk48l4krpx1s1,1,rs,1,f06cf042,f0njf0o0,f000,00rsrsrsfu,00rsrsrsd2,rsrsrsrsrs"
            x1="0"
            x2="100%"
            y1="0"
            y2="0"
            gradientTransform="matrix(0.619, 0.718, -0.718, 0.619, 7.296, 4.672)"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#ffffff" stop-opacity="0.57" offset="0"></stop>
            <stop stop-color="#ffffff" stop-opacity="0.47" offset="0"></stop>
            <stop stop-color="#ffffff" stop-opacity="1" offset="1"></stop>
          </linearGradient>
        </defs>
        <!-- svg渐变设置 -->
        <g>
          <path
            fill="url(#illxk48l4krpx1s1,1,rs,1,f06cf042,f0njf0o0,f000,00rsrsrsfu,00rsrsrsd2,rsrsrsrsrs)"
            d="M15.626 20.992l-4.025 10.485-1.726-3.876-3.876 1.726 3.978-10.363c1.581 1.202 3.53 1.945 5.648 2.028v0zM22.074 18.964l3.978 10.363-3.876-1.726-1.726 3.876-4.025-10.485c2.119-0.083 4.068-0.826 5.648-2.028v0 0zM16.026 20c4.971 0 9-4.029 9-9s-4.029-9-9-9c-4.971 0-9 4.029-9 9s4.029 9 9 9v0zM16.026 13.692l-3.5 2.308 1.5-4-3-2h3.5l1.5-4 1.5 4h3.5l-3 2 1.5 4-3.5-2.308z"
          ></path>
        </g>
      </svg>