阿里巴巴矢量图库利用svg代码修改颜色

最新推荐文章于 2024-12-25 15:49:19 发布

原创最新推荐文章于 2024-12-25 15:49:19 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用SVG路径实现图标在鼠标悬停时颜色变化，通过JavaScript控制SVG fill属性，实现图标视觉反馈，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                <svg
                  t="1638849977291"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5185"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333c-258.133 0-469.333-211.2-469.333-469.333S253.867 42.667 512 42.667 981.333 253.867 981.333 512 770.133 981.333 512 981.333z"
                    p-id="5186"
                    fill="#cacaca"	// 在path中添加fill="#???"这句话完成颜色的替换
                  ></path>
                  <path
                    d="M672 441.6L501.333 328.533c-57.6-38.4-106.666-12.8-106.666 57.6v256c0 70.4 46.933 96 106.666 57.6L672 586.667C729.6 544 729.6 480 672 441.6z"
                    p-id="5187"
                    fill="#cacaca"	// 在path中添加fill="#???"这句话完成颜色的替换
                  ></path>
                </svg>

移入移出修改颜色

				<!-- index为图标的唯一值 -->
              <span @mouseover="checkColor(index)" @mouseleave="ckIndex = null">
                <!-- 播放图标 -->
                <svg
                  t="1638849977291"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5185"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333c-258.133 0-469.333-211.2-469.333-469.333S253.867 42.667 512 42.667 981.333 253.867 981.333 512 770.133 981.333 512 981.333z"
                    p-id="5186"
                    :fill="ckIndex == index ? '#fff' : '#cacaca'"
                    ref="color"
                  ></path>
                  <path
                    d="M672 441.6L501.333 328.533c-57.6-38.4-106.666-12.8-106.666 57.6v256c0 70.4 46.933 96 106.666 57.6L672 586.667C729.6 544 729.6 480 672 441.6z"
                    p-id="5187"
                    :fill="ckIndex == index ? '#fff' : '#cacaca'"
                    ref="color"
                  ></path>
                </svg>
              </span>

  data() {
    return {
      ckIndex: null,
    };
  },
  methods: {
    checkColor(index) {
      this.ckIndex = index;
    },
  },