文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG更改特定颜色- CSS和JS

问SVG更改特定颜色- CSS和JS
EN

Stack Overflow用户
提问于 2018-07-22 08:26:49
回答 3查看 177关注 0票数 2

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

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

滚动脚本

代码语言：javascript
复制
// 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给你：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.navbar-logo {}

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

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

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

但奇怪的是，它似乎在edge上工作得很好？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

html
css
svg
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-07-23 21:03:04

使用CSS变量FTW

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

为了提供最佳体验，我使用了一个带有默认颜色和备用颜色的CSS变量-如果浏览器不是支持类型的话

代码语言：javascript
复制
<path style="fill: var(--color-name, #8d5000)" fill="#8d5000" d="M...." />
                       CSS variable  Default         Fallback

​

​

示例：

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

​

代码语言：javascript
复制
/*
.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%; }
代码语言：javascript
复制
<!-- 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

票数 2
EN

Stack Overflow用户

发布于 2018-07-22 09:17:57

您的svg标记已经为2018定义了自定义的蓝色，因此添加color: whatever;和fill: currentColor;不会覆盖它，但它将覆盖SVG中黑色的部分，这似乎正是您想要的。下面是我在chrome devtools中编辑你的SVG的截图：

SVG上的color: red; + fill: currentColor;：

​

​

color: white; + fill:currentColor; + background: black;

​

​

票数 2
EN

Stack Overflow用户

发布于 2018-07-23 01:15:13

在the advice from pretzelhammer之后，我提出了以下解决方案来解决这个问题。

HTML

代码语言：javascript
复制
    <a href="index.html" class="navbar-brand logo-white"><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

代码语言：javascript
复制
.navbar-brand {
    position: relative;
    padding: 0px;
    svg {
        width: 75%;
    }
}

.navbar-logo {
    padding-top: 10px;
    max-height: 58px;
}

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

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

JS

代码语言：javascript
复制
$(window).on('load', function () {

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

所以基本上，我已经通过JS将logo-white和logo-black类添加到标记中。这将使用SCSS中定义的fill: currentColor来影响SVG，这只会影响黑色区域。

你可以在这里看到工作演示：https://bagraddemo.tgtmedia.co.uk/ as自己看看代码。(工作22/07/18 -如果它对你不起作用，请在下面评论)

关于SVG不能在chrome上显示的问题。这是一个我没有正确定义大小的问题，因此chrome看不到它。我还用一个简单的@font-face修复了字体问题，这是我忘记做的。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51461082

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档