解决图片是svg代码，鼠标悬停到svg,想换个颜色

SVG是指可伸缩矢量图形，是一种基于XML语法的图形格式。在想实现一个右上角显示一个小图片，作为固定钉的功能，悬停时想换一个颜色，想要有一个互动的效果。
下面UI图拿到的svg图片代码：

        <svg
              width="17"
              height="17"
              viewBox="0 0 17 17"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                x="11.3145"
                y="1.41406"
                width="6"
                height="1"
                rx="0.5"
                transform="rotate(45 11.3145 1.41406)"
                fill="#B7B7B7"
              />
              <rect
                x="4.94922"
                y="4.95117"
                width="10"
                height="2"
                rx="1"
                transform="rotate(45 4.94922 4.95117)"
                fill="#B7B7B7"
              />
              <path
                d="M11.6671 3.18273L13.7884 5.30405L9.89934 11.3145L5.6567 7.07182L11.6671 3.18273Z"
                fill="#B7B7B7"
              />
              <path
                d="M6.36523 9.19238L7.77945 10.6066L3.53681 13.435L6.36523 9.19238Z"
                fill="#B7B7B7"
              />
            </svg>

在上述代码中，我们可以使用fill属性来改变SVG的颜色。其中，fill属性值可以是任何CSS颜色值，包括十六进制颜色代码、RGB颜色代码等。例如，fill="#B7B7B7"就表示填充灰色。
除了在代码中直接修改fill属性值之外，我们也可以使用样式表来改变SVG的颜色，修改后：

 <svg
              width="17"
              height="17"
              viewBox="0 0 17 17"
              id="svg-icon"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                x="11.3145"
                y="1.41406"
                width="6"
                height="1"
                rx="0.5"
                transform="rotate(45 11.3145 1.41406)"
                />
                <!-- fill="#B7B7B7" -->
              <rect
                x="4.94922"
                y="4.95117"
                width="10"
                height="2"
                rx="1"
                transform="rotate(45 4.94922 4.95117)"
                />
                <!-- fill="#B7B7B7" -->
              <path
                d="M11.6671 3.18273L13.7884 5.30405L9.89934 11.3145L5.6567 7.07182L11.6671 3.18273Z"
                />
                <!-- fill="#B7B7B7" -->
              <path
                d="M6.36523 9.19238L7.77945 10.6066L3.53681 13.435L6.36523 9.19238Z"
                />
                <!-- fill="#B7B7B7" -->
            </svg>

<style>
  #svg-icon {
    fill: #B7B7B7；
  }
 #svg-icon:hover {
    fill: var(--brandColor)
  }
</style>

在svg标签加上id="svg-icon"，fill="#B7B7B7"都去掉，在样式style,写上自己的代码即可。