【CSS】SVG图片属性及修改颜色

【CSS】SVG图片属性及修改颜色

引用

CSDN

1.

https://blog.csdn.net/kakaai77/article/details/137705189

在前端开发中，SVG（可缩放矢量图形）因其矢量特性而被广泛应用。然而，对于初学者来说，SVG的属性和颜色修改可能是一个挑战。本文将详细介绍SVG的关键属性，并提供实用的代码示例，帮助开发者更好地掌握SVG的使用。

SVG的基本属性

SVG有多个关键属性，其中最常用的包括：

• width：设置最终SVG图片的宽度。
• height：设置最终SVG图片的高度。
• viewBox：定义SVG的视区，即在SVG上截取一块区域并放大到整个SVG图片上。viewBox的值通常包含四个参数：起始x坐标、起始y坐标、宽度和高度。

例如，以下是一个SVG代码示例：

<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的值表示：

• 从x轴坐标0开始截取
• 从y轴坐标0开始截取
• x轴截取1024个像素
• y轴截取1024个像素

最终将截取的区域等比例放大或缩小到指定的宽高，形成最终的SVG图片。

修改SVG的颜色

在实际开发中，我们经常需要修改SVG图标的颜色。SVG提供了fill属性来设置图标颜色。例如，将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颜色修改方式

对于前端开发者来说，直接修改fill属性可能不够方便。一个更好的方法是将fill属性设置为currentColor，这样就可以通过CSS的color属性来控制SVG的颜色：

<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属性具有继承性，可以更方便地通过CSS来控制SVG的颜色。

通过本文的介绍，相信读者对SVG的基本属性和颜色修改方法有了更深入的了解。掌握这些知识将有助于开发出更灵活、更美观的前端界面。