JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100" height="100" viewBox="50 120 10 10">
<g id="g3794"
	cursor="help"
	class="info">
	<title id="title4601">Test Title</title>
	<circle style="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-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

body{
  background: #CCC;
}
#g3794 circle {
  fill: white;
}
#g3794:hover circle {
  fill: black;
}
#g3794 text {
  fill: black;
}
#g3794:hover text {
  fill: white;
}