svg, supports mouseover

The requirement in today's project is to add a mouseover event to a filled svg path.
Move the mouse over to display the most recent number.


But under Firefox test found. When using raphael, Firefox does not support mouseover, mouseout. After checking whether the path is not filled or toFont, it is found that Firefox does not support this event.
Then I thought of a way to use a div to cover it. Bind the mouseover event of the div (div has no compatibility problem)
to set the mask method below. Get the width and height of the svg, and the top and left values, and then dynamically set the css style.
var svg_offset= $( chart_b.id ).find("svg").offset();
			   	 	$(document.body).append("<div id='rect'> ")
			   	 	var div=$("#rect").css({
			   	 		position:"absolute",
			   	 		width:this.realW,
			   	 		height:this.realH,
			   	 		id:"rect",
			   	 		left:svg_offset.left+c.padding[3],
			   	 		top:svg_offset.top+c.padding[0]
			   	 	})

A few points to pay attention to: The first is css is to set the style style. attr is not acceptable.
Second: set absolute. This allows positioning relative to the body. instead of fixed. is relative to the page document

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327015947&siteId=291194637
SVG