我有一个 SVG 图像，它周围有一个笔划，它具有与填充图标相同的颜色值。该图标位于图像内的背景上。这是我的例子:https://jsfiddle.net/o48629qs/
我想要完成的是，当元素悬停时，六边形周围的笔划与图标颜色相同，同时保持其背景为黑色。我的代码如下。不知道为什么它不起作用，因为我需要路径在悬停时改变颜色。
HTML
<svg class=“instagram” data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445.33 500.72">
<title>Untitled-9</title>
<g id="border">
<path d="M225.64,495.55a33.25,33.25,0,0,1-16.6-4.44L29.94,387.72A33.29,33.29,0,0,1,13.33,359V152.16a33.29,33.29,0,0,1,16.6-28.74L209,20a33.25,33.25,0,0,1,33.21,0l179.1,103.38a33.29,33.29,0,0,1,16.61,28.74V358.93a33.26,33.26,0,0,1-16.63,28.81L242.24,491.11A33.26,33.26,0,0,1,225.64,495.55Z"
transform="translate(-2.97 -5.19)" style="fill:#141516" />
<path d="M225.64,25.9A22.84,22.84,0,0,1,237.06,29l179.1,103.38a22.87,22.87,0,0,1,11.43,19.77V358.93a22.78,22.78,0,0,1-11.43,19.82L237.06,482.14a22.89,22.89,0,0,1-22.85,0L35.11,378.75A22.87,22.87,0,0,1,23.69,359V152.16a22.87,22.87,0,0,1,11.43-19.77L214.21,29a22.84,22.84,0,0,1,11.43-3.06m0-20.71A43.62,43.62,0,0,0,203.85,11L24.75,114.45A43.67,43.67,0,0,0,3,152.16V359a43.67,43.67,0,0,0,21.78,37.71l179.1,103.39a43.61,43.61,0,0,0,43.57,0L426.48,396.71a43.64,43.64,0,0,0,21.82-37.78V152.11a43.67,43.67,0,0,0-21.78-37.71L247.42,11a43.61,43.61,0,0,0-21.78-5.83h0Z"
transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
</g>
<path d="M275.94,173.55H175.33a31.73,31.73,0,0,0-31.69,31.69V305.86a31.73,31.73,0,0,0,31.69,31.69H275.94a31.73,31.73,0,0,0,31.69-31.69V205.24A31.73,31.73,0,0,0,275.94,173.55Zm9.09,18.9h3.62v27.8l-27.7.09-0.09-27.8Zm-82.8,46.27a28.82,28.82,0,1,1-5.46,16.83A28.84,28.84,0,0,1,202.23,238.71Zm89.43,67.14a15.73,15.73,0,0,1-15.72,15.71H175.33a15.73,15.73,0,0,1-15.72-15.71V238.71H184.1a44.85,44.85,0,1,0,83.08,0h24.49v67.14Z"
transform="translate(-2.97 -5.19)" style="fill:#ff0000" />
</svg>
</a>
CSS
a svg {
width: 6rem;
height: 6rem;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
transition: all 0.3s;
}
a svg:hover {
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
a svg path#fill:hover {
fill: #00ffff !important;
}
最佳答案
此 css 应该适合您(将绿色更改为您选择的任何颜色)
a svg:hover g path:last-child{
fill: green !important;
}
a svg:hover g + path{
fill: green !important;
}
叉你 fiddle ，这是一个演示 https://jsfiddle.net/iamnottony/gu2e9nf3/1/
关于html - 悬停时更改 SVG 的描边和填充颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36562465/