鼠标悬停在 SVG 上无法按预期工作答案

【问题标题】：Mouse Hover not working as expected on SVG鼠标悬停在 SVG 上无法按预期工作
【发布时间】：2017-10-27 10:08:02
【问题描述】：

我已经使用 illustrator 创建了 SVG，现在我使用 CSS 来制作鼠标悬停效果。

当鼠标悬停在子元素上时，鼠标悬停在父元素上停止工作。我不知道为什么会这样？是不是因为子元素阻止了悬停效果的传播？

这里是相关的 SVG 组：

<a target="_blank" href="#">
        <g id="Technology">
            <defs>
                <rect id="SVGID_1_" x="191.825" y="377.344" width="37.1" height="33.539"/>
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  overflow="visible"/>
            </clipPath>

            <path class="pie-chunk" fill="#FFFFFF" d="M280.676 ....."/>
            <path class="small-chunk" fill="#1387C9" d="M136.448,339.175c21.922,58.945,78.01,10...."></path>
            <path class="pie-chunk" clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M225.97,381.062h-9.865 ..."/>
            <path class="pie-chunk"  clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M202.123,394.549v4 .... "/>

            <text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-size="16">
           TECHNOLOGY
</text>
        </g>
    </a>

这是 CSS：

    g#Technology:hover text tspan,
    g#Technology:hover text{
        fill: #fff;
    } 
    g#Technology:hover .pie-chunk:hover{
        fill: #5D5D5D;
        opacity: 0.9;
    }
    g#Technology:hover .small-chunk{
        fill: #1E3565;
    }

这里是问题的JSFiddle。

生产：

将鼠标悬停在技术白色部分上，它将正常工作。
悬停在文本（子元素）上，会产生悬停效果变得怪异。
将鼠标悬停在带有图标的蓝色小部分上，它会再次变得怪异。

谁能指出我在这里做错了什么？

【问题讨论】：

你能修复你的 JSFiddle 链接吗？
您可能需要将pointer-events: none; 添加到文本元素的CSS 规则和“带有图标的蓝色小部分”（不管是什么）。但是如果没有minimal reproducible example——或者至少没有指向你的 JSFiddle 页面的链接——就不可能确定你的问题是什么。请解决此问题或将其删除。
对不起。 @VTodorov 这里是链接jsfiddle.net/fupa5u9p
@squeamishossifrage 抱歉，我刚刚更新了链接。

标签： css svg

【解决方案1】：

您的问题在于您的 CSS。

g#Technology:hover .pie-chunk:hover{
    fill: #5D5D5D;
    opacity: 0.9;
}

您要么悬停在父级或子级上，而不是两者。删除第二个:hover，我认为它的行为会符合您的预期。

.svg-wrapper {
	    background: #ccc;
	    display: inline-block;
	    margin: 0 auto;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    transform: translate(-50%, -50%);
	}
	.svg-wrapper text,
	.svg-wrapper tspan{
		font-family: 'Open Sans';
		font-weight: 700;

	}
	.small-chunk,
	.pie-chunk{
		transition: 0.8s;
	}
	
	
	g#Technology:hover text tspan,
	g#Technology:hover text {
		fill: #fff;
	} 
	g#Technology:hover .pie-chunk {
		fill: #5D5D5D;
		opacity: 0.9;
	}

<div class="svg-wrapper">
	<svg id="Layer_1" width="570.049px" height="569.001px" viewBox="0 0 570.049 569.001">
	<a target="_blank" href="http://headsinternational.com/focus/technology">
		<g id="Technology">
			<path class="pie-chunk" fill="#FFFFFF" d="M280.676,528.176l-0.049-46.825l-0.016-17.363l-0.023-21.567c-66.187-1.626-122.278-43.901-144.2-102.843
				l-20.589,6.416l-16.972,5.292l-44.135,13.762l-39.215,12.225c38.068,110.46,142.233,190.113,265.238,191.729L280.676,528.176z"/>
  		<text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-family="'OpenSans-Extrabold'" font-size="16">TECHNOLOGY</text>
		</g>
	</a>

  </svg>
</div>

【讨论】：