V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
weixiaoD
V2EX  ›  Vue.js

请教一个 naiveUI 彩色 icon 问题

  •  
  •   weixiaoD · 236 天前 · 1408 次点击
    这是一个创建于 236 天前的主题,其中的信息可能已经有所发展或是发生改变。

    naiveUI 里的图标可以通过给 icon 添加属性 color 来修改 svg 图标的颜色 像这样

    af273af089bceaa4a1c6f.png

    <n-button>
      <template #icon>
        <n-icon color="red">
          <HourglassOutline />
        </n-icon>
      </template>
    </n-button>
    

    后来我想要把这个颜色换成彩色动画,然后我去搜索了相关信息, 找到了一个修改 background 属性的方法...但是这不是我要的效果,我就是希望里面的那个图标渐变就好,我试过加一个 background-clip,加完之后就没效果了,图标变成黑色了,请问有什么好的方法可以实现我要的效果吗?

    573be8b069f6adc0fe192.gif

    <n-button>
      <template #icon>
        <n-icon class="Gradient">
          <HourglassOutline />
        </n-icon>
      </template>
    </n-button>
    
    @property --colorA {
      syntax: '<color>';
      inherits: false;
      initial-value: fuchsia;
    }
    
    @property --colorC {
      syntax: '<color>';
      inherits: false;
      initial-value: #f79188;
    }
    
    @property --colorF {
      syntax: '<color>';
      inherits: false;
      initial-value: red;
    }
    
    .Gradient {
      background: linear-gradient(45deg,
          var(--colorA),
          var(--colorC),
          var(--colorF));
      animation: change 5s infinite linear;
      /* background-clip: text; */
      
    }
    
    @keyframes change {
      20% {
        --colorA: red;
        --colorC: #a93ee0;
        --colorF: fuchsia;
      }
    
      40% {
        --colorA: #ff3c41;
        --colorC: #e228a0;
        --colorF: #2e4c96;
      }
    
      60% {
        --colorA: orange;
        --colorC: green;
        --colorF: teal;
      }
    
      80% {
        --colorA: #ae63e4;
        --colorC: #0ebeff;
        --colorF: #efc371;
      }
    }
    
    6 条回复
    xuchunyang
        1
    xuchunyang  
       236 天前
    试试直接在 SVG 代码中调整
    LavaC
        2
    LavaC  
       236 天前
    没用过 nativeUI ,如果这个 svg 是以 base64 形式存在于 background-image 上的话,可以将值赋予给 mask-image 做一个遮罩,再用背景覆盖。
    不过总的来说这个方法实现的效果很糙,最好还是直接从 svg 本身入手。
    ntedshen
        3
    ntedshen  
       236 天前
    讲道理用 iconfont 多好。。。
    试试看 css3 的 mix-blend-mode ?
    wingzhingling
        4
    wingzhingling  
       235 天前 via Android
    给 color 绑定一个变量,写个 setInterval 循环变换 color 的值,css 设置一下 transition 时间
    weixiaoD
        5
    weixiaoD  
    OP
       225 天前 via Android
    @wingzhingling 这种只能设置单一色彩吧,不能渐变那种效果,像我 gif 那样
    weixiaoD
        6
    weixiaoD  
    OP
       225 天前 via Android
    @xuchunyang 没接触过 svg 动画,哈哈,有空再看看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5807 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 02:34 · PVG 10:34 · LAX 18:34 · JFK 21:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.