本文主要是介绍修改svg图片底色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前提条件：开发中在墨刀原型图拿到图标或图片，一般是svg图片，但是直接使用F12拿元素的方式把元素放在页面上，底色就会变成黑色
如果想要修改图片底色，可以通过path标签的fill属性决定，单色情况下可以直接赋颜色值
<pathfill="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
<svgxmlns="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=""><linearGradientid="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><pathfill="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>
这篇关于修改svg图片底色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
