html - SVG 改变特定颜色 - CSS & JS

Question

我有一些图像和 SVG，我希望在网站上使用。我希望使用 SVG 并根据滚动位置更改单个特定颜色。

我已经有了用于菜单的滚动脚本，但是我不知道如何使 SVG 的特定部分/颜色改变颜色。

滚动脚本

// Sticky Nav
$(window).on('scroll', function () {
        if ($(window).scrollTop() > 200) {
            $('.scrolling-navbar').addClass('top-nav-collapse');
            $('.navbar-logo').addClass('logo-black')
        } else {
            $('.scrolling-navbar').removeClass('top-nav-collapse');
            $('.navbar-logo').addClass('logo-white')
        }
    });

您可以访问https://bagraddemo.tgtmedia.co.uk/看看我对脚本工作的意思。

现在我知道可以使用 fill:currentColor; 来影响 SVG，但我不想填充整个 SVG。我只想改变一种颜色，黑色。

在你提问之前，这里有一些 html 给你:

<a href="index.html" class="navbar-brand"><svg viewBox="0 0 919.3 264.9" xmlns="http://www.w3.org/2000/svg" class="navbar-logo">
  <defs>
    <style>
      .cls-1{font-size:160.17px;font-family:Haettenschweiler, Haettenschweiler;}.cls-2{fill:#28bafa;}
    </style>
  </defs>
  <title>
    v7
  </title>
  <g id="Layer_2" data-name="Layer 2">
    <g data-name="v7 - Shortlist">
      <path d="M4.5 2.1C21.8 32.2 39.2 62.4 56.8 92.8H3.1V0H103.4V93.1L4.9 1.7Z"/>
      <path d="M118.9 15.3c4.2 0.2 8.3 0 12.2 0.6 6.3 1.1 8.2 6.3 6.3 11.4 -0.5 1.3-1.9 2.3-2.9 3.5 0.6 0.3 1.3 0.6 2 1A7.7 7.7 0 0 1 141 39.6a7.8 7.8 0 0 1-5.9 7.5 34.4 34.4 0 0 1-7.1 1.1c-2.9 0.2-5.9 0-9 0Zm4.8 28.5c2.8-0.2 5.5-0.2 8.1-0.6a5 5 0 0 0 4-4.5 4.9 4.9 0 0 0-3.9-4.6c-2.7-0.4-5.4-0.4-8.2-0.7Zm0-14.4a49.1 49.1 0 0 0 6.3-0.7c2-0.5 2.9-2.2 2.9-4.5a3.7 3.7 0 0 0-2.8-3.8c-2.1-0.4-4.2-0.4-6.4-0.6Z"/>
      <path d="M374.7 17.9v4.9c-2.4-0.9-4.8-1.8-7.2-2.5 -5.6-1.7-10.4-0.3-14.1 4.2a12.5 12.5 0 0 0-0.3 14.5c4.1 5.5 11 5.9 16.4 4a1.6 1.6 0 0 0 0.8-1.2c0.1-1.7 0-3.4 0-5.4h-5.8V32h11c0 4.4 0 8.8 0 13.3 0 0.4-0.6 0.9-1 1a86.7 86.7 0 0 1-10.6 2.2 16.5 16.5 0 0 1-16.5-9.2c-4.1-8.8-0.4-19.5 9.5-23 5.6-2 11-1.1 16.3 1.1Z"/>
      <path d="M227.8 32.8V48h-5.1V15.6h5V29.3l0.4 0.2c0.7-0.8 1.3-1.6 2-2.4 3.1-3.3 6.2-6.6 9.2-10a4.3 4.3 0 0 1 4-1.6 39.6 39.6 0 0 0 4 0c-4.9 5.4-9.5 10.4-13.7 15l15.8 17.6c-1.1 0-3.2 0-5.2 0 -0.3 0-0.7-0.4-1-0.7 -3.8-3.7-7.6-7.4-11.4-11C230.6 35.2 229.4 34.2 227.8 32.8Z"/>
      <path d="M147.1 48.1c0.7-1.6 1.2-3 1.7-4.3 3.9-9.1 7.7-18.2 11.6-27.4a2.2 2.2 0 0 1 1.5-1 15 15 0 0 1 2.7 0l14.5 32.6a30 30 0 0 1-4.5-0.1c-0.6-0.1-1.2-0.9-1.5-1.5C172 44.3 171 42 170 39.6a1.6 1.6 0 0 0-1.8-1.1c-3.6 0.1-7.2 0-10.8 0a1.5 1.5 0 0 0-1.7 1.2c-0.9 2.6-2.1 5.1-3.3 7.7a1.8 1.8 0 0 1-1.2 0.8C150 48.2 148.8 48.1 147.1 48.1Zm15.6-24.8l-4.4 10.6h9.1Z"/>
      <path d="M326.7 15.5c4.8 10.8 9.6 21.6 14.5 32.6h-5.2l-4.3-9.6c-4.1 0-8.3 0-12.4 0a1.6 1.6 0 0 0-1.2 0.8c-1.2 2.5-2.2 5.1-3.4 7.6a2.2 2.2 0 0 1-1.5 1.1 34.9 34.9 0 0 1-4.1 0c0.9-2.1 1.7-4.1 2.5-6q5.5-12.8 11-25.7a2 2 0 0 1 1.3-0.9A17.3 17.3 0 0 1 326.7 15.5ZM329.6 34c-1.6-3.7-3.2-7.1-4.8-10.7 -1.5 3.7-3 7.1-4.4 10.7Z"/>
      <path d="M404.7 15.6v4.3H391.6v9.7h12.8V34H391.6v9.3h13.5v4.4H386.4v-32Z"/>
      <path d="M212.3 23.1c-3.8-2-7.6-3.4-11.7-3.2 -5.4 0.3-10.9 4-11.7 10.7a11.8 11.8 0 0 0 12 13.1 18.7 18.7 0 0 0 8.9-2.1c0.8-0.4 1.7-0.8 2.9-1.4 0 1.8 0.1 3.3 0 4.8a1.5 1.5 0 0 1-0.8 1.2 45.5 45.5 0 0 1-7.7 1.9 29.1 29.1 0 0 1-7.9-0.3c-6.5-1.2-10.6-5.4-12-11.7 -2.3-9.9 2.8-17.6 12.4-20.4 5.2-1.5 10.2 0.1 15.1 1.8 0.3 0.1 0.6 0.8 0.6 1.2C212.3 20.1 212.3 21.5 212.3 23.1Z"/>
      <path d="M256.8 39.6a60.8 60.8 0 0 0 5.4 3.7 6 6 0 0 0 6.1 0c2-1.1 2.9-3.6 1.4-5.2a50 50 0 0 0-5.8-4.8c-1.9-1.5-4.2-2.8-5.7-4.7a8.3 8.3 0 0 1 5-12.9 12.6 12.6 0 0 1 9.6 1.4 2.2 2.2 0 0 1 1 1.5c0.1 1.5 0 2.9 0 4.8 -1-0.7-1.7-1.3-2.5-1.8 -2.7-1.5-5.4-2.5-8.4-0.8 -2 1.1-2.5 3.3-0.8 4.8a49.8 49.8 0 0 0 6.6 4.8c2.6 1.6 5 3.3 5.8 6.4 1.5 5.6-0.9 10.9-7.4 11.6a13.7 13.7 0 0 1-9.6-2.3 1.9 1.9 0 0 1-0.8-1.2C256.7 43 256.8 41.3 256.8 39.6Z"/>
      <path d="M281.8 15.7a3 3 0 0 1 0.6-0.1h26.3v4.4H297.6V48h-4.8V20H281.8Z"/>
      <path d="M233.7 77h-2.8V64.4l-0.4-0.2c-1.2 1.5-2.5 3-3.7 4.6 -1.5 2-1.5 2.1-3.1 0.2 -1.3-1.5-2.4-3-3.9-4.8V77h-3V59.5c3.1-1.3 4 1.5 5.4 3 1 1.1 1.9 2.4 3 3.8 1.4-1.8 2.6-3.4 3.9-5 1.1-1.4 2.4-2.6 4.6-1.7Z"/>
      <path d="M179 58.9c3.8 0.4 7.6 0.4 11.2 1.1 3 0.6 5.1 3.8 5.4 6.8 0.6 6.3-3.8 10.6-9.4 10.2 -2.3-0.1-4.7 0-7.1 0Zm3 2.6v13c1.7 0 3.3 0.1 4.9 0a6.4 6.4 0 0 0 5.7-5.2c0.5-2.7-0.7-5.7-3.4-6.6C187 61.9 184.5 61.9 182 61.5Z"/>
      <path d="M134.1 77.1c-1.6-0.1-3.1 0.6-3.8-1.4 -0.4-1.3-1-2.4-1.6-3.7h-7.2a14.1 14.1 0 0 0-1.1 2.7c-0.5 2.3-1.8 3-4.1 2.2 1.3-3.1 2.7-6.4 4-9.6 1-2.3 1.9-4.7 3-7A2.8 2.8 0 0 1 125.1 59c0.4 0 1.2 0.8 1.4 1.3 1.9 4 3.7 8 5.5 12C132.7 73.9 133.3 75.3 134.1 77.1Zm-6.7-7.8c-0.9-2-1.6-3.6-2.5-5.4l-2.2 5.5Z"/>
      <path d="M174.8 77c-3.1 0.2-3.2 0.2-4.2-2.5a3.5 3.5 0 0 0-4.1-2.6c-4.3 0.2-4.3 0-5.9 4 -0.8 1.9-2.2 1.2-3.7 1.2l7.7-18c1.4-0.5 2.3 0 2.9 1.5C169.8 66.1 172.3 71.5 174.8 77Zm-6.7-7.7l-2.4-5.5 -2.2 5.5Z"/>
      <path d="M152.5 62.8a46.2 46.2 0 0 0-7.1-0.9 6 6 0 0 0-5.7 5.7 6.5 6.5 0 0 0 4.8 6.9c2.3 0.7 4.4-0.1 6.5-0.8 0.7-0.2 1.3-0.6 2-1 0.3 4 0.5 3.7-4.7 4.6 -2.9 0.5-6.1 0.3-8.3-2.1 -1.3-1.4-2.7-3-3-4.7 -1.6-8.1 4.9-12.6 11.7-11.4 0.4 0.1 0.7 0.2 1.1 0.2C152.4 59.7 152.8 60.2 152.5 62.8Z"/>
      <path d="M204.2 61.8v4.9h6.9v2.6h-6.9v5.2h7.6V77H201.3V59.4h10.1v2.4Z"/>
      <path d="M237.8 59.6c3.5-1.4 4.7 1.3 6.2 3.1 0.6 0.7 1.1 1.4 1.8 2.3 0.9-1.2 1.7-2.2 2.5-3.3 1.3-1.8 2.7-3.2 5.4-2.1 -1.1 1.4-2.1 2.9-3.2 4.4a26.3 26.3 0 0 0-2.2 2.7 7.5 7.5 0 0 0-1.1 3.1c-0.1 2.4 0 4.8 0 7.3h-3a41.4 41.4 0 0 1 0-6c0.4-3-1.2-4.9-2.9-6.9C240.2 62.6 239 61.1 237.8 59.6Z"/>
      <path d="M260.3 66.3c-2.8 0-4.7-1.6-4.6-4.2a4.6 4.6 0 1 1 9.2 0A4.1 4.1 0 0 1 260.3 66.3Zm3.5-4.3c0-1.8-1.8-3.9-3.4-3.8A4 4 0 0 0 256.8 62a3.5 3.5 0 1 0 7 0Z"/>
      <path d="M259.9 62.2c-0.5 1.2-0.7 1.8-1 2.4l-0.5-0.2V59.7c0.7 0 1.4 0 2.1 0 1.6-0.1 2.3 0.4 1.7 2.2 -0.2 0.5 0.2 1.2 0.2 1.8 0 0.3-0.2 0.6-0.3 0.9 -0.2-0.2-0.5-0.4-0.7-0.6C260.8 63.3 260.4 62.9 259.9 62.2Z"/>
      <text class="cls-1" transform="translate(0 211.99)">
        GRADUATION 
        <tspan class="cls-2" x="631.2">
          2018
        </tspan>
      </text>
    </g>
  </g>
</svg>
</a>

还有一些 SCSS:

.navbar-logo {}

.logo-white {
    color: white;
    fill: currentColor;
}

.logo-black {
    color: black;
    fill: currentColor;
}

Your svg markup already defines a custom blue coloring for the 2018 so adding color: whatever; and fill: currentColor; won't override it, but it will override the part of the SVG that is black, which seems to be exactly what you want.

感谢您的建议，我不经常使用 SVG，这是我正在尝试使用的代码。我不太确定我做错了什么，但是当我添加类(class)时，有些东西并没有改变颜色。

我在 chrome 上预览 SVG 时似乎也有问题。从这里可以看出:https://i.imgur.com/BxiGVQg.png

但奇怪的是它似乎在边缘上工作得很好？ https://i.imgur.com/0cEVW8t.png

---

这是图像的 svg 和 png 版本的一些原始链接。

PNG:https://bagraddemo.tgtmedia.co.uk/assets/img/v7.png

SVG:https://bagraddemo.tgtmedia.co.uk/assets/img/v7.svg

Answer 1

使用 CSS 变量 FTW

控制 SVG 颜色的最简单方法是使用 CSS 变量 ( 87% browser support )。 它们不仅允许您控制多种颜色，还允许控制颜色 在 shadow dom 元素上(使用 时)。

为了提供最佳体验，我使用带有默认颜色和回退的 CSS 变量——如果浏览器不支持的话

<path style="fill: var(--color-name, #8d5000)" fill="#8d5000" d="M...." />
                       CSS variable  Default         Fallback

示例:

(点击运行代码片段查看结果)

/*
.robo-1 uses the default colors provided as second parameter 
in the inline css variables or the fill color if css variables 
are not supported (like old ie)
*/
.robo-2 {
  --head-color: olive;
  --body-color: orange;  
  --arm-color: maroon; 
  --feet-color: maroon;    
}

.robo-3 {
  --head-color: magenta;
  --body-color: purple;  
  --arm-color: hotpink; 
  --feet-color: hotpink;    
}
.robo-4 {
  --head-color: lightgray;
  --eye-color: black; 
  --body-color: lightgray;  
  --arm-color: lightgray; 
  --feet-color: lightgray;    
}

/* hover state */ 
.robo-4:hover {
  --head-color: black;
  --eye-color: white; 
  --body-color: black;  
  --arm-color: black; 
  --feet-color: black;    
}


svg { width: 20%; }

<!-- master robot svg --> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="robot" class="robo-1">
    <!-- head -->
    <path style="fill:var(--head-color, black)" fill="black" d="M751.8 203.2H639.9l90.7-114.7c3.4 1.3 7.1 1.9 10.9 1.9 19.6 0 35.5-18 35.5-40.3C777 28 761.1 10 741.5 10S706 28 706 50.3c0 8.9 2.5 17.1 6.9 23.8L610.7 203.2H403.9c9.8-9.9 16-24.3 16-40.3 0-29.9-21.5-54.1-48.1-54.1s-48.1 24.2-48.1 54.1c0 16 6.2 30.4 16 40.3h-91.5a114.8 114.8 0 0 0-114.5 115l34.3 306c0 63.5 51.3 115 114.5 115h435c63.2 0 114.5-51.5 114.5-115l34.3-306c0-63.5-51.2-115-114.5-115z"/>
    <!-- eyes -->
    <path style="fill:var(--eye-color, white)" fill="white" d="M332.9 541.4a32.2 32.2 0 0 1 0-64.4 32 32 0 0 1 32 32.2 32 32 0 0 1-32 32.2zm318.2 9.2c-19 0-34.3-13.4-34.3-29.9s15.4-29.9 34.3-29.9c19 0 34.3 13.4 34.3 29.9s-15.3 29.9-34.3 29.9z"/>
    <!-- body -->
    <path style="fill:var(--body-color, black)" fill="black" d="M385.4 753c-8.7 15-13.6 32.2-13.6 50.6 0 57.2 47.7 103.5 106.5 103.5h50.4c58.8 0 106.5-46.4 106.5-103.5 0-18.4-5-35.7-13.6-50.6H385.4z"/> 
    <!-- arms -->
    <path style="fill:var(--arm-color, black)" fill="black" d="M325.1 753a44.4 44.4 0 0 0-5.9 21.9c0 22.6 18.4 42.2 41.6 52l.1.6a108 108 0 0 1-.5-10c-1.9-12.7-5.5-38.6 8.8-64.4h-44.1zm314.8 0c4.2 14.2 9.4 37.7 7.1 63.5a64.3 64.3 0 0 0 38.1-63.5h-45.2z"/>
    <!-- feets -->
    <path style="fill:var(--feet-color, black)" fill="black" d="M572.9 916.5c-31.6 6.8-31.6 9.1-31.6 9.1l-8.8-.2a40 40 0 0 0-7.2 23.2c0 20.3 14.4 36.8 32.1 36.8 17.7 0 32.1-16.5 32.1-36.8a38.5 38.5 0 0 0-16.6-32.1zm-118.7 6.8s-6.8-2-16.8-6.5a40.2 40.2 0 0 0-17.5 34.1c0 21.6 15.4 39.1 34.3 39.1 19 0 34.3-17.5 34.3-39.1 0-10.4-3.6-19.9-9.5-26.9l-24.8-.7z"/>
</svg>


<!-- the clones are coming! -->
<svg viewBox="0 0 1000 1000" class="robo-2">
  <use xlink:href="#robot"></use>
</svg>
<svg viewBox="0 0 1000 1000" class="robo-3">
  <use xlink:href="#robot"></use>
</svg>
<svg viewBox="0 0 1000 1000" class="robo-4">
  <use xlink:href="#robot"></use>
</svg>

Codepen example