时间戳

首页 > 解决方案 > SVG 组的鼠标悬停

svg - SVG 组的鼠标悬停

问题描述

我是一个试图解决问题的 SVG 新手......

我正在尝试创建一个 SVG 元素 - 白色圆圈中的黑色“i”，鼠标悬停时反转（即，变成黑色圆圈中的白色“i”）。

我有这个：

<svg>
<g id="g3794"
	onmouseover="evt.target.setAttribute('fill', 'red');"
	onmouseout="evt.target.setAttribute('fill', 'blue');"
	cursor="help"
	class="info">
	<title id="title4601">Test Title</title>
	<circle style="fill:#ffffff;stroke-width:0.18795563" transform="scale(1,-1)" r="2.3912315" cy="-126.73662" cx="55.64901" id="path86" class="info_circle" />
	<text transform="scale(1,-1)" id="text84" y="-125.03816" x="55.623314"
		style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.01215029px;line-height:3.75911283px;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, ';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.18795563"
		xml:space="preserve"
		class="info_i">
			<tspan style="font-weight:bold;text-align:center;text-anchor:middle;stroke-width:0.18795563" y="-125.03816" x="55.623314" id="tspan82" sodipodi:role="line">i</tspan>
	</text>
</g>
</svg>

我注意到：

怎样才能达到我想要的效果？我可以在 CSS 中为两个元素类设置悬停样式，但这仅适用于每个元素。当悬停目标时，如何更改两个组元素的颜色？

标签： svgonmouseover

解决方案

推荐阅读