Question

我是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中为这两个元素类设置悬停样式，但这仅适用于每个元素。悬停目标中的任何一个时，如何更改两个组元素的颜色？

SVG集团的onmouseover

0 个答案: