直接在 HTML 标记中使用 SVG 不允许我将角色分配为按钮或具有所需的悬停效果

Question

我有一个带有图标的容器，该图标应该执行两个功能：

1. 具有按钮的作用（可通过键盘/屏幕阅读器等访问）
2. 悬停/聚焦时变红

当我直接在标记中使用 SVG 时，悬停效果可以按预期工作，但我无法像使用 img 标签时那样为 SVG 分配按钮角色：

.container {
  height: 500px;
  width: 400px;
  background-color: lightblue;
  position: relative;
}

  .favourite-icon {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .favourite-icon:hover {
    fill: red;
  }

<div class="container">
      <svg
      width="48"
      height="48"
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      class="favourite-icon"
    >
      <path
        d="M23.587 36.1592C23.7732 36.1592 23.989 36.0957 24.2345 35.9688C24.4884 35.8503 24.7338 35.7148 24.9708 35.5625C27.3152 34.0391 29.3549 32.4395 31.0899 30.7637C32.8334 29.0794 34.1834 27.3486 35.1397 25.5713C36.0961 23.7855 36.5743 21.987 36.5743 20.1758C36.5743 18.974 36.3797 17.8779 35.9903 16.8877C35.6095 15.8975 35.0805 15.0426 34.4034 14.3232C33.7263 13.6038 32.935 13.0537 32.0294 12.6729C31.1323 12.2835 30.1759 12.0889 29.1603 12.0889C27.8823 12.0889 26.7735 12.4105 25.8341 13.0537C24.9031 13.6885 24.1541 14.5264 23.587 15.5674C23.0284 14.5348 22.2794 13.6969 21.3399 13.0537C20.409 12.4105 19.3045 12.0889 18.0265 12.0889C16.9939 12.0889 16.0291 12.2835 15.1319 12.6729C14.2433 13.0537 13.4562 13.6038 12.7706 14.3232C12.0935 15.0426 11.5603 15.8975 11.171 16.8877C10.7901 17.8779 10.5997 18.974 10.5997 20.1758C10.5997 21.987 11.0779 23.7855 12.0343 25.5713C12.9907 27.3486 14.3364 29.0794 16.0714 30.7637C17.8149 32.4395 19.8631 34.0391 22.2159 35.5625C22.4444 35.7148 22.6856 35.8503 22.9396 35.9688C23.1935 36.0957 23.4093 36.1592 23.587 36.1592Z"
        fill="#currentColor"
        fill-opacity="0.4"
      />
      <path
        d="M24.2345 35.9688L23.3887 34.1564L23.3518 34.1736L23.3156 34.1923L24.2345 35.9688ZM24.9708 35.5625L26.0523 37.2449L26.0606 37.2395L24.9708 35.5625ZM31.0899 30.7637L32.4794 32.2022L32.4795 32.2021L31.0899 30.7637ZM35.1397 25.5713L36.901 26.519L36.9028 26.5155L35.1397 25.5713ZM35.9903 16.8877L34.1236 17.6057L34.1263 17.6126L34.129 17.6195L35.9903 16.8877ZM32.0294 12.6729L31.2332 14.5075L31.2436 14.5121L31.2541 14.5164L32.0294 12.6729ZM25.8341 13.0537L26.9608 14.7062L26.964 14.704L25.8341 13.0537ZM23.587 15.5674L21.8279 16.519L23.581 19.7595L25.3434 16.5241L23.587 15.5674ZM21.3399 13.0537L20.2031 14.6992L20.21 14.704L21.3399 13.0537ZM15.1319 12.6729L15.9198 14.5112L15.9281 14.5075L15.1319 12.6729ZM12.7706 14.3232L11.3227 12.9435L11.3142 12.9525L12.7706 14.3232ZM11.171 16.8877L9.30969 16.1559L9.30697 16.1628L9.30431 16.1697L11.171 16.8877ZM12.0343 25.5713L10.2712 26.5155L10.2731 26.519L12.0343 25.5713ZM16.0714 30.7637L14.6783 32.1987L14.6855 32.2056L16.0714 30.7637ZM22.2159 35.5625L23.3253 33.8984L23.3142 33.891L23.3029 33.8837L22.2159 35.5625ZM22.9396 35.9688L23.834 34.1799L23.8098 34.1678L23.7853 34.1564L22.9396 35.9688ZM23.587 38.1592C24.2103 38.1592 24.7506 37.9535 25.1533 37.7452L23.3156 34.1923C23.2817 34.2099 23.2857 34.2042 23.3242 34.1928C23.3628 34.1815 23.4542 34.1592 23.587 34.1592V38.1592ZM25.0802 37.7811C25.416 37.6244 25.7402 37.4455 26.0523 37.2449L23.8893 33.8801C23.7275 33.9842 23.5608 34.0761 23.3887 34.1564L25.0802 37.7811ZM26.0606 37.2395C28.4958 35.6571 30.6392 33.9796 32.4794 32.2022L29.7005 29.3251C28.0707 30.8993 26.1347 32.421 23.881 33.8855L26.0606 37.2395ZM32.4795 32.2021C34.3426 30.4023 35.8294 28.5104 36.901 26.519L33.3785 24.6236C32.5373 26.1869 31.3243 27.7565 29.7004 29.3252L32.4795 32.2021ZM36.9028 26.5155C37.996 24.4742 38.5743 22.3539 38.5743 20.1758H34.5743C34.5743 21.62 34.1962 23.0967 33.3767 24.6271L36.9028 26.5155ZM38.5743 20.1758C38.5743 18.7557 38.3437 17.4075 37.8516 16.1559L34.129 17.6195C34.4156 18.3484 34.5743 19.1922 34.5743 20.1758H38.5743ZM37.857 16.1697C37.39 14.9554 36.7275 13.8744 35.8598 12.9525L32.947 15.694C33.4335 16.2108 33.829 16.8395 34.1236 17.6057L37.857 16.1697ZM35.8598 12.9525C34.9923 12.0308 33.9694 11.3191 32.8047 10.8293L31.2541 14.5164C31.9006 14.7884 32.4603 15.1769 32.947 15.694L35.8598 12.9525ZM32.8256 10.8382C31.6675 10.3356 30.439 10.0889 29.1603 10.0889V14.0889C29.9127 14.0889 30.5971 14.2315 31.2332 14.5075L32.8256 10.8382ZM29.1603 10.0889C27.5303 10.0889 26.0163 10.505 24.7042 11.4035L26.964 14.704C27.5307 14.3159 28.2343 14.0889 29.1603 14.0889V10.0889ZM24.7074 11.4013C23.5006 12.2241 22.5413 13.306 21.8307 14.6107L25.3434 16.5241C25.7668 15.7467 26.3056 15.1529 26.9608 14.7062L24.7074 11.4013ZM25.3461 14.6157C24.6411 13.3126 23.6799 12.232 22.4698 11.4035L20.21 14.704C20.8789 15.1619 21.4157 15.757 21.8279 16.519L25.3461 14.6157ZM22.4768 11.4083C21.1694 10.505 19.6561 10.0889 18.0265 10.0889V14.0889C18.9528 14.0889 19.6485 14.316 20.2031 14.6992L22.4768 11.4083ZM18.0265 10.0889C16.7356 10.0889 15.4981 10.3338 14.3358 10.8382L15.9281 14.5075C16.5601 14.2333 17.2523 14.0889 18.0265 14.0889V10.0889ZM14.3441 10.8346C13.1997 11.325 12.1897 12.0338 11.3227 12.9435L14.2185 15.703C14.7226 15.1739 15.2869 14.7824 15.9198 14.5111L14.3441 10.8346ZM11.3142 12.9525C10.4497 13.8711 9.78488 14.9473 9.30969 16.1559L13.0323 17.6195C13.3358 16.8477 13.7374 16.2142 14.227 15.694L11.3142 12.9525ZM9.30431 16.1697C8.82443 17.4174 8.59971 18.7608 8.59971 20.1758H12.5997C12.5997 19.1871 12.7559 18.3384 13.0377 17.6057L9.30431 16.1697ZM8.59971 20.1758C8.59971 22.3539 9.178 24.4742 10.2712 26.5155L13.7974 24.6271C12.9778 23.0967 12.5997 21.62 12.5997 20.1758H8.59971ZM10.2731 26.519C11.3435 28.5083 12.8245 30.3992 14.6783 32.1987L17.4644 29.3286C15.8482 27.7597 14.6378 26.189 13.7955 24.6236L10.2731 26.519ZM14.6855 32.2056C16.5339 33.9823 18.6855 35.6593 21.1289 37.2413L23.3029 33.8837C21.0406 32.4188 19.0958 30.8966 17.4573 29.3217L14.6855 32.2056ZM21.1065 37.2266C21.4207 37.4361 21.7502 37.6208 22.0938 37.7811L23.7853 34.1564C23.6211 34.0797 23.4681 33.9936 23.3253 33.8984L21.1065 37.2266ZM22.0451 37.7576C22.4287 37.9494 22.9673 38.1592 23.587 38.1592V34.1592C23.732 34.1592 23.827 34.1843 23.8562 34.1928C23.8869 34.2019 23.8811 34.2034 23.834 34.1799L22.0451 37.7576Z"
        fill="#F4EADD"
      />
    </svg>
</div>

但是，当我使用 img 标签时，我可以通过 src 属性使用 SVG，为 img 分配按钮角色，但无法在悬停状态下达到预期结果（SVG 保存在其自己的文件并在 src) 中引用：

.container {
  height: 500px;
  width: 400px;
  background-color: lightblue;
  position: relative;
}

  .favourite-icon {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .favourite-icon:hover {
    fill: red;
  }

<div class="container">
  <img src='../icon.svg' class="favourite-icon" role="button" />
</div>

谁能给点建议吗？

Answer 1

将 SVG 视为文档。当您将 HTML 文件包含在 中时，您无法编辑该框架中的 CSS。当您将其作为 img 而不是 SVG src 代码包含时，它会直接从 src 文档中提取该图像。

但是，CSS 过滤器 a> 允许我们直接在浏览器中应用一大堆很酷的 Photoshop 式效果。

img {
  max-width: 100%;
}
img:hover {
  filter: invert(0.5) sepia(1) hue-rotate(200deg) saturate(4) brightness(1);
}

<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg">