最近的開發(fā)中遇到了SVG不能修改顏色的問題，以前是直接用，沒有研究過，現(xiàn)在搞個(gè)筆記記錄下

SVG的屬性：

• width:設(shè)置最終SVG圖片的寬度
• height:設(shè)置最終SVG圖片的高度
• viewbox：視區(qū)，在svg上截取一塊，然后放大到整個(gè)svg圖片上，也就是上述所有最終的寬高
• fill:設(shè)置顏色

舉例：

<svg
  t="1712966539403"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="1466"
  width="200"
  height="200"
>
  <path
    d="M340.736 216.832A162.048 162.048 0 0 1 445.44 254.72a103.168 103.168 0 0 0 10.24 7.68 102.4 102.4 0 0 0 122.88-6.912 161.792 161.792 0 0 1 104.96-38.144 163.84 163.84 0 0 1 101.12 292.864 102.4 102.4 0 0 0-9.216 8.192L511.232 782.592 238.336 509.696l-5.12-4.864a166.4 166.4 0 0 1-16.128-16.128l-1.28-1.536-1.28-1.536A162.048 162.048 0 0 1 176.64 380.928a164.352 164.352 0 0 1 164.096-164.096m0-102.4A266.496 266.496 0 0 0 135.68 551.168h-0.256l4.352 4.352a268.032 268.032 0 0 0 26.112 26.112l314.624 315.136a43.264 43.264 0 0 0 61.184 0l306.176-305.92A266.24 266.24 0 1 0 512.768 177.152l-1.536-1.536h-0.256a265.472 265.472 0 0 0-169.984-61.44z"
    fill="#4C4C4C"
    p-id="1467"
  ></path>
</svg>

在上述的SVG代碼中，viewBox中的值代表為：

• 0：表示從x軸坐標(biāo)開始截取
• 0：表示從y軸坐標(biāo)開始截取
• 1024：x軸一直截取1024個(gè)像素
• 1024：y軸一直截取1024個(gè)像素

最終再等比例放大或者縮小到寬高，形成最終的SVG圖片

但在最近的項(xiàng)目中遇到了需要修改svg圖片顏色的問題，當(dāng)然，還有fill屬性，fill是設(shè)置SVG圖標(biāo)顏色的，當(dāng)我們從iconfont下載圖標(biāo)之后，也就是會(huì)得到上述的SVG圖標(biāo)，我們可以通過找到fill標(biāo)簽來(lái)設(shè)置SVG的顏色

比如修改fill顏色為猛男色

<svg
  t="1712966539403"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="1466"
  width="200"
  height="200"
>
  <path
    d="M340.736 216.832A162.048 162.048 0 0 1 445.44 254.72a103.168 103.168 0 0 0 10.24 7.68 102.4 102.4 0 0 0 122.88-6.912 161.792 161.792 0 0 1 104.96-38.144 163.84 163.84 0 0 1 101.12 292.864 102.4 102.4 0 0 0-9.216 8.192L511.232 782.592 238.336 509.696l-5.12-4.864a166.4 166.4 0 0 1-16.128-16.128l-1.28-1.536-1.28-1.536A162.048 162.048 0 0 1 176.64 380.928a164.352 164.352 0 0 1 164.096-164.096m0-102.4A266.496 266.496 0 0 0 135.68 551.168h-0.256l4.352 4.352a268.032 268.032 0 0 0 26.112 26.112l314.624 315.136a43.264 43.264 0 0 0 61.184 0l306.176-305.92A266.24 266.24 0 1 0 512.768 177.152l-1.536-1.536h-0.256a265.472 265.472 0 0 0-169.984-61.44z"
    fill="pink"
    p-id="1467"
  ></path>
</svg>

這樣就可以改變SVG圖片的顏色了

但對(duì)于我們開發(fā)來(lái)說，fill只是SVG眾多元素其中的一個(gè)屬性，我們修改顏色需要拿到這個(gè)屬性，然后通過設(shè)置屬性的方式來(lái)修改它，怎么才能方便的拿到屬性呢？

嘗試將子元素中的fill移動(dòng)到svg跟標(biāo)簽，如

這樣就更方便我們來(lái)找到這個(gè)元素的屬性了，對(duì)于前端開發(fā)來(lái)說，顏色不就是通過CSS的color屬性來(lái)控制的嗎？
我們可以將path元素中的fill屬性更改為fill=“currentColor”，這樣就可以通過color來(lái)設(shè)置顏色了

<div style="color: purple">
  <svg
    t="1712966539403"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1466"
    width="200"
    height="200"
  >
    <path
      d="M340.736 216.832A162.048 162.048 0 0 1 445.44 254.72a103.168 103.168 0 0 0 10.24 7.68 102.4 102.4 0 0 0 122.88-6.912 161.792 161.792 0 0 1 104.96-38.144 163.84 163.84 0 0 1 101.12 292.864 102.4 102.4 0 0 0-9.216 8.192L511.232 782.592 238.336 509.696l-5.12-4.864a166.4 166.4 0 0 1-16.128-16.128l-1.28-1.536-1.28-1.536A162.048 162.048 0 0 1 176.64 380.928a164.352 164.352 0 0 1 164.096-164.096m0-102.4A266.496 266.496 0 0 0 135.68 551.168h-0.256l4.352 4.352a268.032 268.032 0 0 0 26.112 26.112l314.624 315.136a43.264 43.264 0 0 0 61.184 0l306.176-305.92A266.24 266.24 0 1 0 512.768 177.152l-1.536-1.536h-0.256a265.472 265.472 0 0 0-169.984-61.44z"
      p-id="1467"
      fill="currentColor"
    ></path>
  </svg>
</div>

而且color屬性具有繼承性，更加方便我們來(lái)設(shè)置顏色，到此，svg的基本情況有一個(gè)認(rèn)識(shí)了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-854727.html

到了這里，關(guān)于【CSS】SVG圖片屬性及修改顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！