如何更改SVG的颜色

huangapple
go评论61阅读模式
英文:

How to change svg with colors

问题

I've translated the code part for you:

<svg width="328" height="164" viewBox="0 0 328 164" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#a)">
      <g clip-path="url(#b)">
         <mask id="c" maskUnits="userSpaceOnUse" x="31" y="30" width="266" height="133" style="mask-type: alpha">
            <path d="M39.5 162.5c-4.418 0-8.025-3.585-7.759-7.995a132.507 132.507 0 0 1 38.567-85.697 132.502 132.502 0 0 1 187.384 0 132.517 132.517 0 0 1 38.567 85.697c.266 4.41-3.341 7.995-7.759 7.995H225c-4.418 0-7.938-3.602-8.603-7.97a52.978 52.978 0 0 0-14.92-29.507 53.007 53.007 0 0 0-74.954 0 53.027 53.027 0 0 0-14.92 29.507c-.665 4.368-4.185 7.97-8.603 7.97H39.5Z" fill="#D9D9D9"/>
         </mask>
         <g mask="url(#c)">
            <path d="M31.5 162.5A132.505 132.505 0 0 1 89.352 53.029L164 162.5H31.5Z" fill="#4BC068"/>
            <path d="M36.746 126.547c24.266-87.81 103.9-97.513 132.203-96.455L164 162.5Z" fill="#f5c500"/>
            <path d="M168.923 30.091a132.496 132.496 0 0 1 123.058 98.101L164 162.5l4.923-132.409Z" fill="#FF8363"/>
            <path d="M188.29 31.506c105.719 19.442 108.2 119.348 108.21 130.892L164 162.5Z" fill="#eb4a65"/>
            <path opacity=".1" d="M31.5 162.5a132.503 132.503 0 0 1 81.794-122.414 132.503 132.503 0 0 1 173.12 71.708A132.5 132.5 0 0 1 296.5 162.5h-13.25A119.247 119.247 0 0 0 118.365 52.327 119.25 119.25 0 0 0 44.75 162.5H31.5Z" fill="#343A40"/>
         </g>
      </g>
      <path d="M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z" fill="#030F40"/>
      <circle cx="165.176" cy="158.038" r="2.529" transform="rotate(-19.65 165.176 158.038)" fill="#F8F9FA"/>
      <path d="M16.503 156.624v-3.792c0-1.524-1.104-2.448-2.472-2.448-1.356 0-2.46.924-2.46 2.448v3.792c0 1.524 1.104 2.448 2.46 2.448 1.368 0 2.472-.924 2.472-2.448Zm-1.224-.036c0 .816-.468 1.392-1.248 1.392-.768 0-1.236-.576-1.236-1.392v-3.72c0-.816.468-1.392 1.236-1.392.78 0 1.248.576 1.248 1.392v3.72ZM57.625 46v-1.092

<details>
<summary>英文:</summary>

i am using reactjs, i have this svg,and i am looking fo a method to change the **width** of the colors according to some values from db.

This is the svg, you can copy it and past it in the browser inspector to see it : 


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;svg width=&quot;328&quot; height=&quot;164&quot; viewBox=&quot;0 0 328 164&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;g clip-path=&quot;url(#a)&quot;&gt;
        &lt;g clip-path=&quot;url(#b)&quot;&gt;
          &lt;mask id=&quot;c&quot; style=&quot;mask-type:alpha&quot; maskUnits=&quot;userSpaceOnUse&quot; x=&quot;31&quot; y=&quot;30&quot; width=&quot;266&quot; height=&quot;133&quot;&gt;
            &lt;path d=&quot;M39.5 162.5c-4.418 0-8.025-3.585-7.759-7.995a132.507 132.507 0 0 1 38.567-85.697 132.502 132.502 0 0 1 187.384 0 132.517 132.517 0 0 1 38.567 85.697c.266 4.41-3.341 7.995-7.759 7.995H225c-4.418 0-7.938-3.602-8.603-7.97a52.978 52.978 0 0 0-14.92-29.507 53.007 53.007 0 0 0-74.954 0 53.027 53.027 0 0 0-14.92 29.507c-.665 4.368-4.185 7.97-8.603 7.97H39.5Z&quot; fill=&quot;#D9D9D9&quot; /&gt;
          &lt;/mask&gt;
          &lt;g mask=&quot;url(#c)&quot;&gt;
            &lt;path d=&quot;M31.5 162.5A132.505 132.505 0 0 1 89.352 53.029L164 162.5H31.5Z&quot; fill=&quot;#4BC068&quot; /&gt;
            &lt;path d=&quot;M89.35 53.03a132.5 132.5 0 0 1 79.599-22.938L164 162.5 89.35 53.03Z&quot; fill=&quot;#F5C500&quot; /&gt;
            &lt;path d=&quot;M168.923 30.091a132.496 132.496 0 0 1 123.058 98.101L164 162.5l4.923-132.409Z&quot; fill=&quot;#FF8363&quot; /&gt;
            &lt;path d=&quot;M291.986 128.209a132.487 132.487 0 0 1 4.514 34.189L164 162.5l127.986-34.291Z&quot; fill=&quot;#EB4A65&quot; /&gt;
            &lt;path opacity=&quot;.1&quot; d=&quot;M31.5 162.5a132.503 132.503 0 0 1 81.794-122.414 132.503 132.503 0 0 1 173.12 71.708A132.5 132.5 0 0 1 296.5 162.5h-13.25A119.247 119.247 0 0 0 118.365 52.327 119.25 119.25 0 0 0 44.75 162.5H31.5Z&quot; fill=&quot;#343A40&quot; /&gt;
          &lt;/g&gt;
        &lt;/g&gt;
        &lt;path d=&quot;M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z&quot; fill=&quot;#030F40&quot; /&gt;
        &lt;circle cx=&quot;165.176&quot; cy=&quot;158.038&quot; r=&quot;2.529&quot; transform=&quot;rotate(-19.65 165.176 158.038)&quot; fill=&quot;#F8F9FA&quot; /&gt;
        &lt;path d=&quot;M16.503 156.624v-3.792c0-1.524-1.104-2.448-2.472-2.448-1.356 0-2.46.924-2.46 2.448v3.792c0 1.524 1.104 2.448 2.46 2.448 1.368 0 2.472-.924 2.472-2.448Zm-1.224-.036c0 .816-.468 1.392-1.248 1.392-.768 0-1.236-.576-1.236-1.392v-3.72c0-.816.468-1.392 1.236-1.392.78 0 1.248.576 1.248 1.392v3.72ZM57.625 46v-1.092h-3.48l2.676-3.276c.528-.648.804-1.092.804-1.848 0-1.476-1.008-2.4-2.472-2.4-1.452 0-2.484.96-2.484 2.412h1.224c0-.96.612-1.32 1.26-1.32.792 0 1.248.528 1.248 1.296 0 .432-.132.744-.456 1.14l-3.288 3.996V46h4.968Zm6.458-2.532c0-1.5-1.008-2.472-2.244-2.472-.264 0-.528.036-.756.132l1.836-3.672h-1.308l-1.944 3.96c-.372.744-.636 1.404-.636 2.1 0 1.584 1.056 2.556 2.532 2.556s2.52-1.032 2.52-2.604Zm-1.224.024c0 .912-.54 1.488-1.308 1.488s-1.296-.576-1.296-1.488c0-.924.528-1.476 1.296-1.476.816 0 1.308.636 1.308 1.476ZM74.072 46l-2.376-3.696 2.112-2.388H72.32l-2.364 2.808v-5.268h-1.224V46h1.224v-1.788l.9-1.02L72.56 46h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm78.37-25.128v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V19h1.188v-1.284h.912Zm6.219-1.116c0-1.056-.468-1.692-1.2-2.016.66-.324 1.068-.912 1.068-1.824 0-1.416-1.032-2.388-2.484-2.388-1.368 0-2.436.876-2.508 2.328h1.224c.06-.756.54-1.224 1.284-1.224.696 0 1.26.456 1.26 1.32 0 .78-.408 1.296-1.296 1.296h-.204v1.068h.204c.96 0 1.428.54 1.428 1.404 0 .9-.6 1.416-1.392 1.416-.708 0-1.344-.384-1.392-1.296h-1.224c.048 1.668 1.248 2.4 2.616 2.4 1.428 0 2.616-.84 2.616-2.484Zm9.977 2.4-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V19h1.224v-1.788l.9-1.02L171.36 19h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm127.238 104.704v-1.092h-5.088v2.436h1.176v-1.344h2.604L300.168 128h1.32l2.856-7.452Zm6.458 0v-1.092h-5.088v2.436h1.176v-1.344h2.604L306.626 128h1.32l2.856-7.452Zm9.87 7.452-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V128h1.224v-1.788l.9-1.02L319.16 128h1.512Zm5.457-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm-17.573 30.744c0-1.02-.576-1.644-1.176-2.004.552-.336 1.032-.936 1.032-1.836 0-1.428-1.104-2.364-2.496-2.364s-2.484.936-2.484 2.364c0 .9.48 1.5 1.032 1.836-.6.36-1.176.984-1.176 2.004 0 1.548 1.164 2.484 2.628 2.484 1.464 0 2.64-.936 2.64-2.484Zm-1.236-.024c0 .792-.612 1.416-1.404 1.416a1.393 1.393 0 0 1-1.404-1.416c0-.792.612-1.428 1.404-1.428.792 0 1.404.636 1.404 1.428Zm-.132-3.78c0 .756-.528 1.296-1.272 1.296s-1.26-.54-1.26-1.296c0-.744.516-1.308 1.26-1.308s1.272.564 1.272 1.308Zm7.97 4.932v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V158h1.188v-1.284h.912Zm6.795 1.284-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V158h1.224v-1.788l.9-1.02 1.704 2.808h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Z&quot; fill=&quot;#ABAFBF&quot; /&gt;
      &lt;/g&gt;
      &lt;defs&gt;
        &lt;clipPath id=&quot;a&quot;&gt;
          &lt;path fill=&quot;#fff&quot; d=&quot;M.5 0h327v164H.5z&quot; /&gt;
        &lt;/clipPath&gt;
        &lt;clipPath id=&quot;b&quot;&gt;
          &lt;path fill=&quot;#fff&quot; d=&quot;M31.5 30h265v134h-265z&quot; /&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;


this is the example of the result : 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;svg width=&quot;328&quot; height=&quot;164&quot; viewBox=&quot;0 0 328 164&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&lt;g clip-path=&quot;url(#a)&quot;&gt;&lt;g clip-path=&quot;url(#b)&quot;&gt;&lt;mask id=&quot;c&quot; maskUnits=&quot;userSpaceOnUse&quot; x=&quot;31&quot; y=&quot;30&quot; width=&quot;266&quot; height=&quot;133&quot; style=&quot;mask-type:alpha&quot;&gt;&lt;path d=&quot;M39.5 162.5c-4.418 0-8.025-3.585-7.759-7.995a132.507 132.507 0 0 1 38.567-85.697 132.502 132.502 0 0 1 187.384 0 132.517 132.517 0 0 1 38.567 85.697c.266 4.41-3.341 7.995-7.759 7.995H225c-4.418 0-7.938-3.602-8.603-7.97a52.978 52.978 0 0 0-14.92-29.507 53.007 53.007 0 0 0-74.954 0 53.027 53.027 0 0 0-14.92 29.507c-.665 4.368-4.185 7.97-8.603 7.97H39.5Z&quot; fill=&quot;#D9D9D9&quot;/&gt;&lt;/mask&gt;&lt;g mask=&quot;url(#c)&quot;&gt;&lt;path d=&quot;M31.5 162.5A132.505 132.505 0 0 1 89.352 53.029L164 162.5H31.5Z&quot; fill=&quot;#4BC068&quot;/&gt;&lt;path d=&quot;M36.746 126.547c24.266-87.81 103.9-97.513 132.203-96.455L164 162.5Z&quot; fill=&quot;#f5c500&quot;/&gt;&lt;path d=&quot;M168.923 30.091a132.496 132.496 0 0 1 123.058 98.101L164 162.5l4.923-132.409Z&quot; fill=&quot;#FF8363&quot;/&gt;&lt;path d=&quot;M188.29 31.506c105.719 19.442 108.2 119.348 108.21 130.892L164 162.5Z&quot; fill=&quot;#eb4a65&quot;/&gt;&lt;path opacity=&quot;.1&quot; d=&quot;M31.5 162.5a132.503 132.503 0 0 1 81.794-122.414 132.503 132.503 0 0 1 173.12 71.708A132.5 132.5 0 0 1 296.5 162.5h-13.25A119.247 119.247 0 0 0 118.365 52.327 119.25 119.25 0 0 0 44.75 162.5H31.5Z&quot; fill=&quot;#343A40&quot;/&gt;&lt;/g&gt;&lt;/g&gt;&lt;path d=&quot;M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z&quot; fill=&quot;#030F40&quot;/&gt;&lt;circle cx=&quot;165.176&quot; cy=&quot;158.038&quot; r=&quot;2.529&quot; transform=&quot;rotate(-19.65 165.176 158.038)&quot; fill=&quot;#F8F9FA&quot;/&gt;&lt;path d=&quot;M16.503 156.624v-3.792c0-1.524-1.104-2.448-2.472-2.448-1.356 0-2.46.924-2.46 2.448v3.792c0 1.524 1.104 2.448 2.46 2.448 1.368 0 2.472-.924 2.472-2.448Zm-1.224-.036c0 .816-.468 1.392-1.248 1.392-.768 0-1.236-.576-1.236-1.392v-3.72c0-.816.468-1.392 1.236-1.392.78 0 1.248.576 1.248 1.392v3.72ZM57.625 46v-1.092h-3.48l2.676-3.276c.528-.648.804-1.092.804-1.848 0-1.476-1.008-2.4-2.472-2.4-1.452 0-2.484.96-2.484 2.412h1.224c0-.96.612-1.32 1.26-1.32.792 0 1.248.528 1.248 1.296 0 .432-.132.744-.456 1.14l-3.288 3.996V46h4.968Zm6.458-2.532c0-1.5-1.008-2.472-2.244-2.472-.264 0-.528.036-.756.132l1.836-3.672h-1.308l-1.944 3.96c-.372.744-.636 1.404-.636 2.1 0 1.584 1.056 2.556 2.532 2.556s2.52-1.032 2.52-2.604Zm-1.224.024c0 .912-.54 1.488-1.308 1.488s-1.296-.576-1.296-1.488c0-.924.528-1.476 1.296-1.476.816 0 1.308.636 1.308 1.476ZM74.072 46l-2.376-3.696 2.112-2.388H72.32l-2.364 2.808v-5.268h-1.224V46h1.224v-1.788l.9-1.02L72.56 46h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm78.37-25.128v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V19h1.188v-1.284h.912Zm6.219-1.116c0-1.056-.468-1.692-1.2-2.016.66-.324 1.068-.912 1.068-1.824 0-1.416-1.032-2.388-2.484-2.388-1.368 0-2.436.876-2.508 2.328h1.224c.06-.756.54-1.224 1.284-1.224.696 0 1.26.456 1.26 1.32 0 .78-.408 1.296-1.296 1.296h-.204v1.068h.204c.96 0 1.428.54 1.428 1.404 0 .9-.6 1.416-1.392 1.416-.708 0-1.344-.384-1.392-1.296h-1.224c.048 1.668 1.248 2.4 2.616 2.4 1.428 0 2.616-.84 2.616-2.484Zm9.977 2.4-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V19h1.224v-1.788l.9-1.02L171.36 19h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm127.238 104.704v-1.092h-5.088v2.436h1.176v-1.344h2.604L300.168 128h1.32l2.856-7.452Zm6.458 0v-1.092h-5.088v2.436h1.176v-1.344h2.604L306.626 128h1.32l2.856-7.452Zm9.87 7.452-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V128h1.224v-1.788l.9-1.02L319.16 128h1.512Zm5.457-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm-17.573 30.744c0-1.02-.576-1.644-1.176-2.004.552-.336 1.032-.936 1.032-1.836 0-1.428-1.104-2.364-2.496-2.364s-2.484.936-2.484 2.364c0 .9.48 1.5 1.032 1.836-.6.36-1.176.984-1.176 2.004 0 1.548 1.164 2.484 2.628 2.484 1.464 0 2.64-.936 2.64-2.484Zm-1.236-.024c0 .792-.612 1.416-1.404 1.416a1.393 1.393 0 0 1-1.404-1.416c0-.792.612-1.428 1.404-1.428.792 0 1.404.636 1.404 1.428Zm-.132-3.78c0 .756-.528 1.296-1.272 1.296s-1.26-.54-1.26-1.296c0-.744.516-1.308 1.26-1.308s1.272.564 1.272 1.308Zm7.97 4.932v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V158h1.188v-1.284h.912Zm6.795 1.284-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V158h1.224v-1.788l.9-1.02 1.704 2.808h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Z&quot; fill=&quot;#ABAFBF&quot;/&gt;&lt;/g&gt;&lt;defs&gt;&lt;clipPath id=&quot;a&quot;&gt;&lt;path fill=&quot;#fff&quot; d=&quot;M.5 0h327v164H.5z&quot;/&gt;&lt;/clipPath&gt;&lt;clipPath id=&quot;b&quot;&gt;&lt;path fill=&quot;#fff&quot; d=&quot;M31.5 30h265v134h-265z&quot;/&gt;&lt;/clipPath&gt;&lt;/defs&gt;&lt;/svg&gt;

&lt;!-- end snippet --&gt;



</details>


# 答案1
**得分**: 1

这是我的做法。对于每种颜色，我使用一个路径（一个半圆），带有非常粗的描边（stroke-width="95"）。

由于我使用这个路径4次，我将其放在defs中，并将其用`<use>`重复使用。

use元素具有`stroke-dasharray`属性。dasharray是一个值数组，在这种情况下，第一个值是描边，第二个值是间隙。

请注意，路径具有`pathLength="100"`，dasharray的值之和也是100。例如，如果stroke-dasharray="30 70"，描边（颜色）是30，间隙是70，描边 + 间隙 = 100。

对于第二种颜色，您需要偏移第一个破折号，因此您将需要一个stroke-dashoffset，其值是前一个破折号的负值。

例如，如果先前的stroke-dasharray="**30** 70"，则stroke-dashoffset的值为"-30"。

<details>
<summary>英文:</summary>

This is how I would do it. For each color I&#39;m using a path (a semicircle) with a very thick stroke (stroke-width=&quot;95&quot;). 

Since I&#39;m using this path 4 times I&#39;ll put it in the defs and I&#39;ll reuse it with `&lt;use&gt;`

The use elements have a `stroke-dasharray` attribute. The dasharray is an array of values where (in this case) the first value is the stroke and the second one is the gap. 

Please observe that the path has `pathLength=&quot;100&quot;` and the the sum of the values of the dasharray is also 100. For example if stroke-dasharray=&quot;30 70&quot; the stroke (the color) is 30 the gap is 70 and both stroke + gap = 100.

For the second color you will need to offset the first dash so you will need a stroke-dashoffset whose value is the negative of the previous dash.

For example if the previous stroke-dasharray=&quot;**30** 70&quot; the value for the stroke-dashoffset=&quot;-30&quot;

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;svg viewBox=&quot;0 0 328 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;defs&gt;
        &lt;path id=&quot;pth&quot; d=&quot;M70 162.5A95 95 0 0 1 260,162.5&quot; stroke-width=&quot;95&quot; pathLength=&quot;100&quot; fill=&quot;none&quot; /&gt;
      &lt;/defs&gt;
      &lt;mask id=&quot;c&quot; maskUnits=&quot;userSpaceOnUse&quot;&gt;
        &lt;path d=&quot;M39.5 162.5c-4.418 0-8.025-3.585-7.759-7.995a132.507 132.507 0 0 1 38.567-85.697 132.502 132.502 0 0 1 187.384 0 132.517 132.517 0 0 1 38.567 85.697c.266 4.41-3.341 7.995-7.759 7.995H225c-4.418 0-7.938-3.602-8.603-7.97a52.978 52.978 0 0 0-14.92-29.507 53.007 53.007 0 0 0-74.954 0 53.027 53.027 0 0 0-14.92 29.507c-.665 4.368-4.185 7.97-8.603 7.97H39.5Z&quot; fill=&quot;white&quot; /&gt;
      &lt;/mask&gt;

      &lt;g fill=&quot;none&quot; mask=&quot;url(#c)&quot;&gt;
        &lt;use href=&quot;#pth&quot; stroke=&quot;green&quot; stroke-dasharray=&quot;30 70&quot; /&gt;
        &lt;use href=&quot;#pth&quot; stroke=&quot;gold&quot; stroke-dasharray=&quot;20 80&quot; stroke-dashoffset=&quot;-30&quot; /&gt;
        &lt;use href=&quot;#pth&quot; stroke=&quot;salmon&quot; stroke-dasharray=&quot;40 80&quot; stroke-dashoffset=&quot;-50&quot; /&gt;
        &lt;use href=&quot;#pth&quot; stroke=&quot;red&quot; stroke-dasharray=&quot;10 90&quot; stroke-dashoffset=&quot;-90&quot; /&gt;

        &lt;path opacity=&quot;.1&quot; d=&quot;M31.5 162.5a132.503 132.503 0 0 1 81.794-122.414 132.503 132.503 0 0 1 173.12 71.708A132.5 132.5 0 0 1 296.5 162.5h-13.25A119.247 119.247 0 0 0 118.365 52.327 119.25 119.25 0 0 0 44.75 162.5H31.5Z&quot; fill=&quot;#343A40&quot; /&gt;
      &lt;/g&gt;
    &lt;!--
      &lt;path d=&quot;M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z&quot; fill=&quot;#030F40&quot; /&gt;
      &lt;circle cx=&quot;165.176&quot; cy=&quot;158.038&quot; r=&quot;2.529&quot; transform=&quot;rotate(-19.65 165.176 158.038)&quot; fill=&quot;#F8F9FA&quot; /&gt;--&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;
In the code I&#39;m using the same mask as you do and the same shadow.

The code for the example above is simplified but you can uncomment the needle and the hub as you have it in your code.

As for the text you may want to delete the path you have and use `&lt;text&gt;` elements so that you can add the values where needed.



</details>



# 答案2
**得分**: 0

只需更改路径中的 `fill` 属性，将其值替换为从数据库获取的值，示例：

```html
<path d="M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z" fill="从数据库获取的颜色值"></path>
英文:

All you need to do is changing the fill attribute in path's with the values that you get from database, example:

&lt;path d=&quot;M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z&quot; fill=&quot;colorFromDb&quot;&gt;&lt;/path&gt;

答案3

得分: 0

You can pass the width and height to SVG icon component.

export const ExampleIcon = ({ size }) => (
  <svg
    width={size || "328"}
    height={size || "164"}
    viewBox="0 0 328 164"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    ...
  </svg>
);

and you can pass the dimension which size do you want to.

<div className="icon">
  <SettingIcon size={100} />
  <ExampleIcon />
  <ExampleIcon size={100} />
</div>

如何更改SVG的颜色

英文:

could you do like that you can pass the width and height to SVG icon component.

example

export const ExampleIcon = ({ size }) =&gt; (
&lt;svg
width={size || &quot;328&quot;}
height={size || &quot;164&quot;}
viewBox=&quot;0 0 328 164&quot;
fill=&quot;none&quot;
xmlns=&quot;http://www.w3.org/2000/svg&quot;
&gt;
&lt;g clip-path=&quot;url(#a)&quot;&gt;
&lt;g clip-path=&quot;url(#b)&quot;&gt;
&lt;mask
id=&quot;c&quot;
// style=&quot;mask-type:alpha&quot;
maskUnits=&quot;userSpaceOnUse&quot;
x=&quot;31&quot;
y=&quot;30&quot;
width=&quot;266&quot;
height=&quot;133&quot;
&gt;
&lt;path
d=&quot;M39.5 162.5c-4.418 0-8.025-3.585-7.759-7.995a132.507 132.507 0 0 1 38.567-85.697 132.502 132.502 0 0 1 187.384 0 132.517 132.517 0 0 1 38.567 85.697c.266 4.41-3.341 7.995-7.759 7.995H225c-4.418 0-7.938-3.602-8.603-7.97a52.978 52.978 0 0 0-14.92-29.507 53.007 53.007 0 0 0-74.954 0 53.027 53.027 0 0 0-14.92 29.507c-.665 4.368-4.185 7.97-8.603 7.97H39.5Z&quot;
fill=&quot;#D9D9D9&quot;
/&gt;
&lt;/mask&gt;
&lt;g mask=&quot;url(#c)&quot;&gt;
&lt;path
d=&quot;M31.5 162.5A132.505 132.505 0 0 1 89.352 53.029L164 162.5H31.5Z&quot;
fill=&quot;#4BC068&quot;
/&gt;
&lt;path
d=&quot;M89.35 53.03a132.5 132.5 0 0 1 79.599-22.938L164 162.5 89.35 53.03Z&quot;
fill=&quot;#F5C500&quot;
/&gt;
&lt;path
d=&quot;M168.923 30.091a132.496 132.496 0 0 1 123.058 98.101L164 162.5l4.923-132.409Z&quot;
fill=&quot;#FF8363&quot;
/&gt;
&lt;path
d=&quot;M291.986 128.209a132.487 132.487 0 0 1 4.514 34.189L164 162.5l127.986-34.291Z&quot;
fill=&quot;#EB4A65&quot;
/&gt;
&lt;path
opacity=&quot;.1&quot;
d=&quot;M31.5 162.5a132.503 132.503 0 0 1 81.794-122.414 132.503 132.503 0 0 1 173.12 71.708A132.5 132.5 0 0 1 296.5 162.5h-13.25A119.247 119.247 0 0 0 118.365 52.327 119.25 119.25 0 0 0 44.75 162.5H31.5Z&quot;
fill=&quot;#343A40&quot;
/&gt;
&lt;/g&gt;
&lt;/g&gt;
&lt;path
d=&quot;M131.436 65.074a.354.354 0 0 1 .665-.24l37.252 91.518a4.45 4.45 0 1 1-8.365 3.008l-29.552-94.286Z&quot;
fill=&quot;#030F40&quot;
/&gt;
&lt;circle
cx=&quot;165.176&quot;
cy=&quot;158.038&quot;
r=&quot;2.529&quot;
transform=&quot;rotate(-19.65 165.176 158.038)&quot;
fill=&quot;#F8F9FA&quot;
/&gt;
&lt;path
d=&quot;M16.503 156.624v-3.792c0-1.524-1.104-2.448-2.472-2.448-1.356 0-2.46.924-2.46 2.448v3.792c0 1.524 1.104 2.448 2.46 2.448 1.368 0 2.472-.924 2.472-2.448Zm-1.224-.036c0 .816-.468 1.392-1.248 1.392-.768 0-1.236-.576-1.236-1.392v-3.72c0-.816.468-1.392 1.236-1.392.78 0 1.248.576 1.248 1.392v3.72ZM57.625 46v-1.092h-3.48l2.676-3.276c.528-.648.804-1.092.804-1.848 0-1.476-1.008-2.4-2.472-2.4-1.452 0-2.484.96-2.484 2.412h1.224c0-.96.612-1.32 1.26-1.32.792 0 1.248.528 1.248 1.296 0 .432-.132.744-.456 1.14l-3.288 3.996V46h4.968Zm6.458-2.532c0-1.5-1.008-2.472-2.244-2.472-.264 0-.528.036-.756.132l1.836-3.672h-1.308l-1.944 3.96c-.372.744-.636 1.404-.636 2.1 0 1.584 1.056 2.556 2.532 2.556s2.52-1.032 2.52-2.604Zm-1.224.024c0 .912-.54 1.488-1.308 1.488s-1.296-.576-1.296-1.488c0-.924.528-1.476 1.296-1.476.816 0 1.308.636 1.308 1.476ZM74.072 46l-2.376-3.696 2.112-2.388H72.32l-2.364 2.808v-5.268h-1.224V46h1.224v-1.788l.9-1.02L72.56 46h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm78.37-25.128v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V19h1.188v-1.284h.912Zm6.219-1.116c0-1.056-.468-1.692-1.2-2.016.66-.324 1.068-.912 1.068-1.824 0-1.416-1.032-2.388-2.484-2.388-1.368 0-2.436.876-2.508 2.328h1.224c.06-.756.54-1.224 1.284-1.224.696 0 1.26.456 1.26 1.32 0 .78-.408 1.296-1.296 1.296h-.204v1.068h.204c.96 0 1.428.54 1.428 1.404 0 .9-.6 1.416-1.392 1.416-.708 0-1.344-.384-1.392-1.296h-1.224c.048 1.668 1.248 2.4 2.616 2.4 1.428 0 2.616-.84 2.616-2.484Zm9.977 2.4-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V19h1.224v-1.788l.9-1.02L171.36 19h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm127.238 104.704v-1.092h-5.088v2.436h1.176v-1.344h2.604L300.168 128h1.32l2.856-7.452Zm6.458 0v-1.092h-5.088v2.436h1.176v-1.344h2.604L306.626 128h1.32l2.856-7.452Zm9.87 7.452-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V128h1.224v-1.788l.9-1.02L319.16 128h1.512Zm5.457-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Zm-17.573 30.744c0-1.02-.576-1.644-1.176-2.004.552-.336 1.032-.936 1.032-1.836 0-1.428-1.104-2.364-2.496-2.364s-2.484.936-2.484 2.364c0 .9.48 1.5 1.032 1.836-.6.36-1.176.984-1.176 2.004 0 1.548 1.164 2.484 2.628 2.484 1.464 0 2.64-.936 2.64-2.484Zm-1.236-.024c0 .792-.612 1.416-1.404 1.416a1.393 1.393 0 0 1-1.404-1.416c0-.792.612-1.428 1.404-1.428.792 0 1.404.636 1.404 1.428Zm-.132-3.78c0 .756-.528 1.296-1.272 1.296s-1.26-.54-1.26-1.296c0-.744.516-1.308 1.26-1.308s1.272.564 1.272 1.308Zm7.97 4.932v-1.14h-.912v-1.992h-1.188v1.992h-2.124l3-6.12h-1.32l-3.012 6.12v1.14h3.456V158h1.188v-1.284h.912Zm6.795 1.284-2.376-3.696 2.112-2.388h-1.488l-2.364 2.808v-5.268h-1.224V158h1.224v-1.788l.9-1.02 1.704 2.808h1.512Zm5.458-.036v-6.048h-1.188v.648c-.456-.552-.948-.72-1.596-.72-.612 0-1.128.192-1.464.528-.588.588-.684 1.44-.684 2.472s.096 1.884.684 2.472c.336.336.84.54 1.452.54.624 0 1.128-.168 1.572-.696v.78c0 .816-.396 1.548-1.428 1.548-.6 0-.936-.18-1.32-.54l-.78.78c.636.588 1.224.804 2.148.804 1.62 0 2.604-1.08 2.604-2.568Zm-1.224-3.12c0 .96-.132 1.908-1.236 1.908s-1.248-.948-1.248-1.908.144-1.908 1.248-1.908 1.236.948 1.236 1.908Z&quot;
fill=&quot;#ABAFBF&quot;
/&gt;
&lt;/g&gt;
&lt;defs&gt;
&lt;clipPath id=&quot;a&quot;&gt;
&lt;path fill=&quot;#fff&quot; d=&quot;M.5 0h327v164H.5z&quot; /&gt;
&lt;/clipPath&gt;
&lt;clipPath id=&quot;b&quot;&gt;
&lt;path fill=&quot;#fff&quot; d=&quot;M31.5 30h265v134h-265z&quot; /&gt;
&lt;/clipPath&gt;
&lt;/defs&gt;
&lt;/svg&gt;
);

and you can pass the dimension which size do you want to.

&lt;div className=&quot;icon&quot;&gt;
&lt;SettingIcon size={100} /&gt;
&lt;ExampleIcon /&gt;
&lt;ExampleIcon size={100} /&gt;
&lt;/div&gt;

如何更改SVG的颜色

huangapple
  • 本文由 发表于 2023年5月25日 20:57:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76332520.html
  • reactjs
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定