更改 hover 上 SVG 的描边和填充颜色

Question

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

hover /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，而是尝试在被选中时更改 colors。 像这样反应

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

Now I can go into this svg replace all the stroke="#6b7280" with stroke ="currentColor" and apply css on my SVG like this

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

有点东西。

这解决了从灰色变成蓝色的线条。 但是我怎样才能实现填充人体轮廓头部和身体的部分呢？ 是否有另一个像 currentColor 这样的属性可以用来执行此操作？

我意识到这里的问题是合乎逻辑的：

我需要 2 种颜色的线条 -> 灰色和蓝色 我还需要 2 个 colors 来填充 -> 无/白色和蓝色。

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

这可以仅通过 CSS 实现吗？ 还是我需要为此使用 2 个 SVG？

Answer 1

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

 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>