悬停时的 SVG 图像答案

【问题标题】：SVG image on Hover悬停时的 SVG 图像
【发布时间】：2020-09-14 02:34:03
【问题描述】：

我有一个我正在从事的项目的 SVG 图像。现在我想改变悬停时的颜色。我让中间人在 Hover 上工作。我的问题是如何将轮廓线也悬停。

<svg width="108" height="108" viewBox="0 0 108 108" fill="#ffffff" xmlns="http://www.w3.org/2000/svg"><circle cx="54" cy="54" r="53" stroke="#1B1D27" stroke-width="2"/><path id="hover-style-svg"d="M30 60L54.1228 48L78.5 60" stroke="#1B1D27" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

【问题讨论】：

您的问题中没有悬停代码，那么您如何 a) 让中间在悬停时工作？ b) 悬停时应该改变什么轮廓线的颜色？
请提供更多代码和有关您需要使用的平台、语言、设备等的详细信息。

标签： image svg

【解决方案1】：

试试代码 sn-p 看看这是不是你要找的，因为这个问题太模糊了。

svg:hover * {
  fill: black;
  stroke: red;
}

<svg width="108" height="108" viewBox="0 0 108 108" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" onclick="alert('You have clicked on svg')">
      <circle cx="54" cy="54" r="53" stroke="#1B1D27" stroke-width="2" />
      <path id="hover-style-svg" d="M30 60L54.1228 48L78.5 60" stroke="#1B1D27" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
    </svg>

【讨论】：