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

Question

I have an SVG that looks like this:我有一个看起来像这样的 SVG：

Which on hover /active must turn into hover /active 上的哪个必须变成

Normal Icon普通图标

 <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>

Active Icon活动图标

 <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>

Now instead of using 2 SVGs, I am trying to just change the colors on being selected.现在，我没有使用 2 个 SVG，而是尝试在被选中时更改 colors。 like this is react像这样反应

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 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"..../>

kinda thing.有点东西。

This solves the lines turning blue from gray.这解决了从灰色变成蓝色的线条。 But how can I achieve the part where the Human Profile Head and Body is filled?但是我怎样才能实现填充人体轮廓头部和身体的部分呢？ Is there another property like currentColor that I can leverage to do this?是否有另一个像 currentColor 这样的属性可以用来执行此操作？

I realise by problem here is logically:我意识到这里的问题是合乎逻辑的：

I need 2 color for lines -> Gray & Blue I also need 2 colors for the Fill -> None/white AND Blue.我需要 2 种颜色的线条 -> 灰色和蓝色我还需要 2 个 colors 来填充 -> 无/白色和蓝色。

But trying to accomplish all this with one color state currentColor isn't possible.但是试图用一种颜色 state currentColor 来完成所有这些是不可能的。 Because the fill may turn to gray rather than blue when active因为激活时填充可能会变成灰色而不是蓝色

Can this be achieved with only CSS?这可以仅通过 CSS 实现吗？ Or do I need to use 2 SVGs for this?还是我需要为此使用 2 个 SVG？

Answer 1

In this example I added the class name "fill" to the two elements (as I understand it) that need a fill on hover.在此示例中，我将 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>

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

问题描述

1 个解决方案

解决方案1
1 2022-01-25 17:45:40

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

问题描述

1 个解决方案

解决方案1 1 2022-01-25 17:45:40

解决方案1
1 2022-01-25 17:45:40