悬停时更改 SVG 的描边和填充颜色

Question

我有一个看起来像这样的 SVG :

悬停时 /active 必须变成

普通图标

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5002 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5004 16.0002H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="18.4999" cy="13.75" r="2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

活动图标

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 2.99997V5.99997" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5002 2.99997V5.99997" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5004 16.0002H10.5" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 12H10.5" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" fill="#2D5BFF" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="18.4999" cy="13.75" r="2" fill="#2D5BFF" stroke="#2D5BFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

现在，我不再使用 2 个 SVG，而是尝试更改被选中时的颜色。就像这是反应

import {ReactComponent as ContactsIcon from './contactsIcon.svg'}

现在我可以进入这个 svg 将所有 stroke="#6b7280" 替换为 stroke ="currentColor" 并像这样在我的 SVG 上应用 css

<ContactsIcon classNames="isActive?text-blue:text-black"..../>

有点东西。

这解决了从灰色变成蓝色的线条。但是我怎样才能实现填充 Human Profile Head 和 Body 的部分呢？是否有另一个属性我可以利用 currentColor 来做到这一点？

我按逻辑理解这里的问题是:

我需要 2 种线条颜色 -> 灰色和蓝色我还需要 2 种颜色用于填充 -> None/white 和蓝色 .

但是尝试用一种颜色状态 currentColor 完成所有这些是不可能的。因为激活时填充可能会变成灰色而不是蓝色

只用CSS就可以实现吗？或者我需要为此使用 2 个 SVG 吗？

Answer 1

在此示例中，我将 class 名称“fill”添加到需要在悬停时填充的两个元素（据我所知）。

svg:hover path,
svg:hover circle {
  stroke: #2D5BFF;
}

svg:hover .fill {
  fill: #2D5BFF;
}

<svg width="200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7.5 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M16.5002 2.99997V5.99997" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M11.5004 16.0002H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M13 12H10.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <circle class="fill" cx="18.4999" cy="13.75" r="2" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

更新

OP 还要求使用 currentColor。在下面的示例中，我替换了所有笔划值宽度 currentColor。但是，当悬停 <a> 时，需要将填充添加到需要填充的两个元素中。 currentColor 始终是为上下文定义的颜色。在这种情况下，<a> 具有悬停效果。

a {
  color: #6B7280;
}

a:hover {
  color: #2D5BFF;
}

a:hover .fill {
  fill: currentColor;
}

<a href="#">
  <svg width="200" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.5 2.99997V5.99997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M16.5002 2.99997V5.99997" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M11.0002 21H6.00024C4.34339 21 3.00024 19.6568 3.00024 18V7.49995C3.00024 5.8431 4.34339 4.49995 6.00024 4.49995H18.0002C19.6571 4.49995 21.0002 5.8431 21.0002 7.49995V8.99995" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M11.5004 16.0002H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M7.50021 15.8752C7.43114 15.8752 7.37516 15.9312 7.37516 16.0002C7.37516 16.0693 7.43114 16.1253 7.50021 16.1253C7.56927 16.1253 7.62526 16.0693 7.62526 16.0002C7.62526 15.9312 7.56927 15.8752 7.50021 15.8752" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M13 12H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M7.50021 11.8751C7.43114 11.8751 7.37516 11.9311 7.37516 12.0002C7.37516 12.0692 7.43114 12.1252 7.50021 12.1252C7.56927 12.1252 7.62526 12.0692 7.62526 12.0002C7.62526 11.9311 7.56927 11.8751 7.50021 11.8751" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 20.4999V20.0939C15.0034 18.9388 15.939 18.0032 17.0941 17.9999H19.9061C21.0612 18.0032 21.9968 18.9388 22.0001 20.0939V20.4999C22.0001 20.7761 21.7763 20.9999 21.5001 20.9999H15.5001C15.224 20.9999 15.0001 20.7761 15.0001 20.4999Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <circle class="fill" cx="18.4999" cy="13.75" r="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</a>

悬停时更改 SVG 的描边和填充颜色

Change stroke and fill color of SVG on hover

javascript

css

svg

reactjs

figma

更新