时间戳

首页 > 解决方案 > 悬停时的 SVG 图像

image - 悬停时的 SVG 图像

问题描述

我有一个我正在处理的项目的 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>

标签： imagesvg

解决方案

尝试代码片段，看看这是否是您正在寻找的，因为问题太模糊了。

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>

推荐阅读