We Keep Coding

Raphael: onclick delay on Mobile - javascript

I'm using Raphael to create an interactive pie chart. Onclick on mobile seem to be laggy. What would be the appropriate way to change the below to a "touch" based solution that isn't so slow?
I also noticed that in IE11 that the function myHoverOut isn't activating. I'm not entirely sure why. Works fine in Chrome, Firefox and Safari.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var w = 330;
var h = 330;
var R = Raphael("paper");
R.setViewBox(0,0,w,h,true);
var svg = document.querySelector("svg");
svg.removeAttribute("width");
svg.removeAttribute("height");
// Setting preserveAspectRatio to 'none' lets you stretch the SVG
R.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
var iconStyle = {
fill: "#fff",
stroke: "",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyle = {
fill: "#1b2833",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylePeople = {
fill: "#005190",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleMoney = {
fill: "#0f5086",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleIP = {
fill: "#0d4b7c",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleScience = {
fill: "#0f4873",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleEndors = {
fill: "#0f436a",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLegislator = {
fill: "#144162",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleChain = {
fill: "#173c59",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylevaluePrice = {
fill: "#1d3853",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStylemarketNeed = {
fill: "#20364b",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleAssets = {
fill: "#223343",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var segmentStyleLeadEnt = {
fill: "#252d38",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer"
};
var wheel = {};
wheel.people = R.path("M205.1,84.2c-0.8-0.4-1.6-0.7-2.5-1.1c-0.1-0.1-0.3-0.1-0.5-0.2c-5.4-2.2-11-3.9-16.6-5 c-0.2,0-0.3-0.1-0.5-0.1c-5.7-1.1-11.5-1.7-17.3-1.7h-0.5c-4.7,0-9.4,0.4-14,1.1l-4.7-6.5l-0.8-1.1v0l-40.8-57 c9.1-3.5,18.4-6.2,27.9-8.1c0.2-0.1,0.3-0.1,0.5-0.1c10.5-2.1,21.2-3.1,31.9-3.1h0.5c10.7,0,21.4,1.1,31.9,3.1 c0.2,0,0.4,0.1,0.5,0.1c0.3,0.1,0.7,0.1,1,0.2l3.6,72v0l0.1,1.2v0L205.1,84.2z").attr(segmentStylePeople);
wheel.leadEntrepreneur = R.path("M285,50l-0.3,0.6l-35.6,62l-0.6,1l-3.3,5.8c-0.5-0.8-1-1.7-1.6-2.5c-0.1-0.1-0.2-0.3-0.3-0.4 c-3.2-4.7-6.9-9.2-11-13.4c0,0-0.1-0.1-0.1-0.1c-0.1-0.1-0.2-0.2-0.3-0.3c-4.2-4.1-8.7-7.8-13.4-11c-0.1-0.1-0.3-0.2-0.4-0.3 c-4.1-2.7-8.5-5.1-12.9-7.1l-0.3-6.2v0l-0.1-1.2v0l-3.6-72c10.1,2.1,20.1,5.1,29.7,9.1c0.2,0.1,0.3,0.1,0.5,0.2 c9.8,4.1,19.3,9.1,28.3,15.1c0.1,0.1,0.3,0.2,0.4,0.3c8.7,5.9,17,12.7,24.8,20.4C284.8,49.8,284.9,49.9,285,50L285,50z").attr(segmentStyleLeadEnt);
wheel.assets = R.path("M330.4,134.2l-1.8,0.9l0,0l-1.7,0.8l0,0l-60.1,31.2l-1,0.5l-7,3.6c0-1.2,0.1-2.4,0.1-3.6c0-0.2,0-0.4,0-0.5 c0-5.8-0.6-11.6-1.7-17.3c0-0.2,0-0.3-0.1-0.5c-1.1-5.7-2.8-11.2-5.1-16.7c0-0.2-0.1-0.3-0.2-0.5c-1.8-4.4-4-8.7-6.6-12.8l3.3-5.8 l0.6-1l35.6-62L285,50c0,0,0.1,0.1,0.1,0.1c7.7,7.7,14.5,16,20.4,24.8c0.1,0.1,0.2,0.3,0.3,0.4c6,9,11.1,18.5,15.1,28.3 c0.1,0.2,0.1,0.3,0.2,0.5C325.2,113.9,328.3,124,330.4,134.2").attr(segmentStyleAssets);
wheel.marketNeed = R.path("M333.7,167.2v0.5c0,10.7-1,21.4-3.1,31.9c0,0.2-0.1,0.4-0.1,0.5c-2,9.9-4.8,19.6-8.6,29l-6.3-0.6h0l-1.8-0.2h0 l-63.6-5.9l-1.1-0.1l-7.9-0.7c0.7-1,1.5-2.1,2.2-3.1c0.1-0.1,0.2-0.3,0.3-0.4c3.3-4.9,6-10,8.2-15.4c0.1-0.2,0.1-0.3,0.2-0.5 c2.3-5.4,3.9-11,5-16.7c0-0.2,0.1-0.4,0.1-0.5c0.9-4.5,1.4-9.1,1.6-13.7l7-3.6l1-0.5l60.1-31.2l0,0l1.7-0.8l0,0l1.8-0.9 c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.3,0.1,0.5C332.7,145.8,333.7,156.5,333.7,167.2").attr(segmentStylemarketNeed);
wheel.valuePrice = R.path("M322,229.2c-0.2,0.6-0.5,1.2-0.7,1.7c0,0.2-0.1,0.3-0.2,0.5c-4.1,9.8-9.1,19.3-15.1,28.3 c-0.1,0.1-0.2,0.3-0.3,0.4v0c-5.9,8.8-12.7,17-20.4,24.8c-0.1,0.1-0.1,0.2-0.2,0.3c0,0-0.1,0.1-0.1,0.1 c-6.7,6.7-13.9,12.8-21.4,18.1l-10.3-8.1h0l-1.3-1.1l0,0l-46.7-36.5l-0.8-0.7l-4.8-3.8c0.9-0.3,1.9-0.7,2.8-1.1 c0.1-0.1,0.3-0.1,0.5-0.2c5.3-2.2,10.5-4.9,15.4-8.2c0.1-0.1,0.3-0.2,0.4-0.3c4.7-3.2,9.3-6.9,13.4-11.1c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.2-0.2,0.3-0.3c3.2-3.3,6.2-6.8,8.9-10.4l7.9,0.7l1.1,0.1l63.6,5.9h0l1.8,0.2h0L322,229.2z").attr(segmentStylevaluePrice);
wheel.supplyChain = R.path("M263.5,303.5c-1.1,0.8-2.2,1.6-3.4,2.3c-0.1,0.1-0.3,0.2-0.4,0.3c-9,6-18.5,11.1-28.3,15.2 c-0.1,0.1-0.3,0.1-0.5,0.2c-10,4.1-20.3,7.2-30.7,9.3c-0.2,0-0.3,0.1-0.5,0.1c-8.1,1.6-16.3,2.6-24.5,3l-7.5-21.4l-0.5-1.5 l-17.8-51.1l-0.4-1l-0.6-1.7c0.3,0.1,0.6,0.1,0.9,0.2c0.2,0.1,0.4,0.1,0.5,0.1c5.7,1.1,11.5,1.7,17.3,1.7h0.5 c5.8,0,11.6-0.6,17.3-1.7h0c0.2,0,0.3-0.1,0.5-0.1c4.7-1,9.3-2.3,13.9-4l4.8,3.8l0.9,0.7l46.7,36.5l0,0l1.3,1.1h0L263.5,303.5z").attr(segmentStyleChain);
wheel.legislatorsRegulators = R.path("M175.1,333.8c-2.5,0.1-5,0.2-7.5,0.2h-0.5c-10.7,0-21.4-1.1-32-3.1c-0.2,0-0.4-0.1-0.5-0.1 c-10.5-2.1-20.7-5.2-30.7-9.3c-0.2,0-0.3-0.1-0.5-0.2c-6.2-2.6-12.3-5.5-18.2-8.9l8-33.3l0.4-1.5l10.5-43.8c3.8,3.7,7.9,7,12.2,9.8 c0.1,0.1,0.3,0.2,0.4,0.3c4.9,3.3,10,6,15.4,8.2c0.1,0.1,0.3,0.2,0.5,0.2c5.1,2.1,10.4,3.7,15.8,4.9l0.6,1.7l0.4,1l17.8,51.1 l0.5,1.5L175.1,333.8z").attr(segmentStyleLegislator);
wheel.independantEndorsement = R.path("M104.1,233.7l-10.5,43.8l-0.4,1.5l-8,33.3c-3.4-2-6.8-4-10.1-6.2c-0.1-0.1-0.3-0.2-0.4-0.3 c-8.8-5.9-17.1-12.7-24.8-20.4l-0.4-0.4c-7.7-7.7-14.5-16-20.4-24.8c-0.1-0.1-0.2-0.3-0.3-0.4c-2.8-4.3-5.5-8.6-7.9-13.1l33.4-32 l1.1-1l23.5-22.5c1,3.8,2.3,7.5,3.8,11.2c0,0.1,0.1,0.3,0.2,0.5c2.2,5.3,5,10.5,8.2,15.4c0.1,0.1,0.2,0.3,0.3,0.4 c3.2,4.7,6.9,9.3,11.1,13.5c0.1,0.1,0.1,0.2,0.2,0.3l0.1,0.1C103.2,232.9,103.6,233.3,104.1,233.7").attr(segmentStyleEndors);
wheel.underpinningScience = R.path("M77.7,185.6c0.4,1.8,0.8,3.6,1.3,5.4l-23.5,22.5l-1.1,1l-33.4,32c-2.7-5-5.1-10-7.2-15.2 c-0.1-0.2-0.1-0.3-0.2-0.5c-4.1-10-7.2-20.3-9.3-30.7c-0.1-0.2-0.1-0.3-0.1-0.5C2,189.1,1,178.4,1,167.8v-0.5 c0-3.5,0.1-6.9,0.4-10.4l55.9-10.9h0l1.4-0.3h0l21-4.1c-0.8,2.6-1.4,5.2-2,7.9c0,0.2-0.1,0.3-0.1,0.5c-1.1,5.7-1.7,11.5-1.7,17.3 v0.5c0,5.8,0.6,11.6,1.7,17.3C77.6,185.3,77.6,185.4,77.7,185.6").attr(segmentStyleScience);
wheel.intellectualProperty = R.path("M106.7,99.2c-1.3,1.1-2.5,2.3-3.7,3.5l-0.4,0.4c-4.2,4.2-7.9,8.7-11,13.4c-0.1,0.1-0.2,0.3-0.3,0.4 c-3.3,4.9-6,10-8.2,15.3c-0.1,0.1-0.1,0.3-0.2,0.5c-1.2,2.9-2.2,5.8-3.1,8.8l-21,4.1h0l-1.4,0.3h0L1.4,156.8 c0.5-7.2,1.4-14.4,2.8-21.5c0-0.2,0.1-0.3,0.1-0.5c2.1-10.5,5.2-20.7,9.3-30.7c0.1-0.2,0.1-0.3,0.2-0.5c4.1-9.8,9.1-19.2,15.1-28.3 c0.1-0.1,0.2-0.3,0.3-0.4c1.2-1.7,2.4-3.4,3.6-5.1l60.6,24.1l1.3,0.5L106.7,99.2z").attr(segmentStyleIP);
wheel.money = R.path("M148.4,70.7l-0.8-1.1v0l-40.8-57c-0.9,0.4-1.9,0.7-2.8,1.1v0c-0.2,0-0.3,0.1-0.5,0.2 c-9.8,4.1-19.3,9.1-28.3,15.1c-0.1,0.1-0.3,0.2-0.4,0.3C66,35.2,57.7,42,50,49.7c-0.1,0.1-0.2,0.2-0.3,0.3l-0.1,0.1 c-6.2,6.2-11.8,12.8-16.8,19.7l60.6,24.1l1.3,0.5l12,4.8c3.1-2.8,6.3-5.2,9.7-7.5c0.1-0.1,0.3-0.2,0.4-0.3c4.9-3.3,10-6,15.4-8.2 c0.1-0.1,0.3-0.1,0.5-0.2c5.4-2.2,11-3.9,16.6-5c0.2-0.1,0.3-0.1,0.5-0.1c1.1-0.2,2.2-0.4,3.3-0.6L148.4,70.7z").attr(segmentStyleMoney);
var icon = {};
icon.people = R.path("M178.1,40.9l0-1.2c1.7,0.2,5.1-1,5.1-1c-1.2-1.2-1.4-2.6-2.2-8s-5.5-5.4-5.8-5.4c-0.4,0-5.1-0.1-5.8,5.4 c-0.8,5.4-1,6.8-2.2,8c0,0,3.4,1.2,5.1,1l0,1.2c-0.9,0.9-1.9,1.7-2.9,2.3c0.3,0.2,0.7,0.4,1,0.5c2.3,1.2,4.4,2.4,4.4,4.8v2.6h10.6 c0.4,0,0.7-0.3,0.7-0.7v-3C186,44.7,181,44.1,178.1,40.9 M164.8,41.2L164.8,41.2v-1c0.9-1,1.5-2.2,2-3.5c0.1-0.2,0.1-0.4,0.2-0.6c0.5-0.2,0.8-0.8,0.9-1.6 c0-0.3,0-0.5,0-0.7c-0.1-0.4-0.2-0.7-0.4-0.9c0-0.7,0-1.5,0-2.3c0-0.6-0.1-1.3-0.1-1.9c0-0.2,0-0.3-0.1-0.5 c-0.7-3.9-4.2-4.3-5.5-4.3c-0.1,0-1,0-1,0c-1.3,0-4.9,0.4-5.5,4.3c0,0.2,0,0.3-0.1,0.5c-0.1,0.7-0.1,1.3-0.1,1.9 c0,0.8,0,1.6,0,2.3c-0.2,0.2-0.3,0.5-0.4,0.9c0,0.2,0,0.5,0,0.7c0.1,0.8,0.5,1.4,0.9,1.6c0.1,0.4,0.2,0.8,0.4,1.2 c0.4,1.1,1,2.1,1.8,3v1c-3.3,3.6-8.8,4.3-8.8,7.3v3.3c0,0.4,0.3,0.7,0.7,0.7h23.4c0.4,0,0.7-0.3,0.7-0.7v-3.3 C173.6,45.5,168.1,44.8,164.8,41.2").attr(iconStyle);
icon.leadEntrepreneur = R.path("M237.7,43.1c9.4,0,17,7.6,17,17c0,3.7-1.2,7.1-3.2,9.9c-0.2-3.5-2-4.8-2-4.8c-0.7-1.7-5.3-3.1-5.3-3.1 c-1.7-0.6-2.2-1.2-2.4-1.5c0,0,0-0.1,0-0.1v0c0,0,0,0,0-0.1v0c-0.1-0.2-0.2-0.8-0.2-1c0,0,0,0,0,0.1c0-0.1,0-0.3,0-0.5c0,0,0,0,0,0 c0.6-0.7,1-1.5,1.3-2.4c0.5-0.5,0.8-1.8,0.8-1.8c0.3-1,0.2-1.5,0.1-1.7c0-0.1,0.9-2.7-0.3-4.7c0,0-0.4-1.9-2.6-2.7 c-2-1.2-5-0.5-5-0.5c-3.7,0.6-4.5,4.9-4.5,4.9c-0.2,2,0.3,3.2,0.3,3.3c-0.2,0.5,0.2,1.7,0.2,1.7c0.1,0.7,0.5,1,0.6,1 c0.3,0.9,0.7,1.8,1.3,2.6c0,0,0,0,0,0c0,0,0.1,0.3,0,0.7c0,0,0-0.1,0-0.1c0,0.2-0.2,0.8-0.2,0.9c0,0,0,0,0,0 c-0.2,0.2-0.3,0.4-0.5,0.6c-1.4,1.1-4.7,2.1-4.7,2.1c-1.4,0.6-2,1.4-2,1.4c-1.5,2.2-2.1,4.4-2.3,5.5c-2.1-2.8-3.3-6.3-3.3-10 C220.7,50.7,228.3,43.1,237.7,43.1 M237.7,41.5c-10.3,0-18.6,8.3-18.6,18.6c0,10.3,8.3,18.6,18.6,18.6c10.3,0,18.6-8.3,18.6-18.6 C256.3,49.9,248,41.5,237.7,41.5").attr(iconStyle);
icon.assets = R.path("M286.8,125.6c-3.4,0-6.2-2.8-6.2-6.2c0-3.4,2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2 C293,122.8,290.2,125.6,286.8,125.6 M304.9,117.1c-0.1-0.5-0.6-1-1.1-1l-2.3-0.1c-0.5,0-1.1-0.5-1.2-0.9l-0.8-2.1 c-0.2-0.5-0.1-1.2,0.2-1.5l1.5-1.7c0.3-0.4,0.4-1,0-1.4l-3.3-3.3c-0.4-0.3-1-0.3-1.4,0l-1.7,1.5c-0.4,0.3-1.1,0.4-1.5,0.2l-2.1-0.8 c-0.5-0.2-0.9-0.7-0.9-1.2l-0.1-2.3c0-0.5-0.5-1-1-1.1c0,0-1.2-0.2-2.3-0.2c-1.1,0-2.3,0.2-2.3,0.2c-0.5,0.1-1,0.6-1,1.1l-0.1,2.3 c0,0.5-0.5,1.1-0.9,1.2l-2.1,0.8c-0.5,0.2-1.2,0.1-1.5-0.2l-1.7-1.5c-0.4-0.3-1-0.4-1.4,0l-3.3,3.3c-0.3,0.4-0.3,1,0,1.4l1.5,1.7 c0.3,0.4,0.4,1.1,0.2,1.5l-0.8,2.1c-0.2,0.5-0.7,0.9-1.2,0.9l-2.3,0.1c-0.5,0-1,0.5-1.1,1c0,0-0.2,1.2-0.2,2.3s0.2,2.3,0.2,2.3 c0.1,0.5,0.6,1,1.1,1l2.3,0.1c0.5,0,1.1,0.5,1.2,0.9l0.8,2.1c0.2,0.5,0.1,1.2-0.2,1.5l-1.5,1.7c-0.3,0.4-0.4,1,0,1.4l3.3,3.3 c0.4,0.3,1,0.3,1.4,0l1.7-1.5c0.4-0.3,1.1-0.4,1.5-0.2l2.1,0.8c0.5,0.2,0.9,0.7,0.9,1.2l0.1,2.3c0,0.5,0.5,1,1,1.1 c0,0,1.2,0.2,2.3,0.2c1.1,0,2.3-0.2,2.3-0.2c0.5-0.1,1-0.6,1-1.1l0.1-2.3c0-0.5,0.5-1.1,0.9-1.2l2.1-0.8c0.5-0.2,1.2-0.1,1.5,0.2 l1.7,1.5c0.4,0.3,1,0.4,1.4,0l3.3-3.3c0.3-0.4,0.3-1,0-1.4l-1.5-1.7c-0.3-0.4-0.4-1.1-0.2-1.5l0.8-2.1c0.2-0.5,0.7-0.9,1.2-0.9 l2.3-0.1c0.5,0,1-0.5,1.1-1c0,0,0.2-1.2,0.2-2.3S304.9,117.1,304.9,117.1").attr(iconStyle);
icon.marketNeed = R.path("M312.6,187.5c-0.3-0.4-0.7-0.5-1.1-0.5h-9.2c-0.6-4-3-9.8-9-9.8s-8.4,5.8-9,9.8h-9.1c-0.4,0-0.9,0.1-1.1,0.5 c-0.3,0.4-0.3,0.8-0.2,1.2l6.1,18.5c0.2,0.6,0.7,0.8,1.3,0.8h24.1c0.6,0,1.1-0.3,1.3-0.8l6.1-18.6 C313,188.2,312.9,187.8,312.6,187.5z M303,195h4.8l-1.6,5H303V195z M278.9,195h5.1v5h-3.5L278.9,195z M293,190v4h-8v-4H293z M293,195v5h-8v-5H293z M285,201h8v4h-8V201z M294,201h7v4h-7V201z M294,200v-5h7v5H294z M294,194v-4h7v4H294z M293.3,180 c4.3,0,5.7,4,6.2,7h-12.4C287.6,184,289,180,293.3,180z M284,190v4h-5.6l-1.3-4H284z M280.9,201h3.1v4h-1.7L280.9,201z M304.4,205 H303v-4h2.7L304.4,205z M308.2,194H303v-4h6.6L308.2,194z").attr(iconStyle);
icon.valuePrice = R.path("M271.8,251v12.3h-4.2L271.8,251z M273.3,251l4.2,12.3h-4.2V251z M250.1,263.3V251l4.2,12.3H250.1z M248.6,251 v12.3h-4.2L248.6,251z M273.7,247.7h0.3c0.6,0,1.1-0.5,1.1-1.1c0-0.6-0.5-1.1-1.1-1.1h-11.9l-0.1-4c0-0.6-0.5-1.1-1.1-1.1 c-0.6,0-1.1,0.5-1.1,1.1l-0.1,4h-11.9c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1h0.3l-5.4,15.6c0,0,0,3.6,6.5,3.6 s6.5-3.6,6.5-3.6l-5.4-15.6h9.2l0,0.8c-0.6,0.4-0.9,1-0.9,1.8c0,0.7,0.3,1.3,0.8,1.7l-0.4,17.9c-6.9,0.5-6.9,3.6-6.9,3.6h17.4 c0,0,0-3.1-6.9-3.6l-0.4-17.9c0.5-0.4,0.8-1,0.8-1.7c0-0.7-0.4-1.4-0.9-1.8l0-0.8h9.2l-5.4,15.6c0,0,0,3.6,6.5,3.6 c6.5,0,6.5-3.6,6.5-3.6L273.7,247.7z").attr(iconStyle);
icon.supplyChain = R.path("M187.5,290.5l-6.4,6.4h4.3v5.4c0,0.8,0.3,1.7,0.9,2.3c0.6,0.6,1.5,0.9,2.3,0.9h19.3c0.8,0,1.7-0.3,2.3-0.9 c0.6-0.6,0.9-1.5,0.9-2.3v-5.4h-4.3v4.3h-17.2v-4.3h4.3L187.5,290.5L187.5,290.5z M188.6,279.8c-0.8,0-1.7,0.3-2.3,0.9 c-0.6,0.6-0.9,1.5-0.9,2.3v5.4h4.3v-4.3h17.1v4.3h-4.3l6.4,6.4l6.4-6.4h-4.3V283c0-0.8-0.3-1.7-0.9-2.3c-0.6-0.6-1.5-0.9-2.3-0.9 H188.6L188.6,279.8z").attr(iconStyle);
icon.legislatorsRegulators = R.path("M132.2,300.3c-0.1,0.1-0.2,0.2-0.3,0.3v1.9c0,0.5-0.4,0.9-0.9,0.9h-19.4c-0.5,0-0.9-0.4-0.9-0.9v-24.9 c0-0.5,0.4-0.9,0.9-0.9H131c0.5,0,0.9,0.4,0.9,0.9v7.2l2.8-3.5v-4.5c0-1.7-1.4-3.1-3.1-3.1H111c-1.7,0-3.1,1.4-3.1,3.1v26.4 c0,1.7,1.4,3.1,3.1,3.1h20.6c1.7,0,3.1-1.4,3.1-3.1v-6.1L132.2,300.3z M128.3,299.7c-0.7,0-1.4-0.3-1.9-0.9l-4.6-5.3c-0.9-1-0.8-2.6,0.3-3.5c1-0.9,2.6-0.8,3.5,0.3l2.6,3l9.5-12 c0.8-1.1,2.4-1.2,3.5-0.4c1.1,0.8,1.2,2.4,0.4,3.5l-11.4,14.3C129.8,299.3,129.1,299.6,128.3,299.7L128.3,299.7z").attr(iconStyle);
icon.independantEndorsement = R.path("M74.1,246l-4.5-0.7l-2.4-3.9c-0.5-0.8-1.2-0.8-1.7,0l-2.6,3.9l-4.3,0.5c-0.9,0.1-1.2,0.8-0.7,1.6l2.7,4.4 l-0.5,4.5c-0.1,0.9,0.5,1.4,1.3,1.1l4.9-1.6l4.8,1.7c0.8,0.3,1.4-0.2,1.4-1.1l-0.4-4.6l2.9-4.3C75.3,246.8,75,246.1,74.1,246 M66.3,266c-3.4,0-6.6-1.1-9.3-2.9l-6,0.7c-1,0.1-1.6-0.6-1.3-1.5l1.8-5.6c-1-2.2-1.6-4.6-1.6-7.2c0-9.1,7.3-16.4,16.4-16.4 s16.4,7.3,16.4,16.4S75.4,266,66.3,266").attr(iconStyle);
icon.underpinningScience = R.path("M54.2,178.3c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S54.9,178.3,54.2,178.3 M44,188.6 c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1S44.6,188.6,44,188.6 M32.1,186.9c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C33.2,186.4,32.7,186.9,32.1,186.9 M24.4,194.8c-0.6,0-1.1-0.5-1.1-1.1 c0-0.6,0.5-1.1,1.1-1.1c0.6,0,1.1,0.5,1.1,1.1C25.5,194.3,25,194.8,24.4,194.8 M54.2,173.7c-1.9,0-3.5,1.6-3.5,3.5 c0,0.6,0.2,1.2,0.5,1.8l-5.5,5.5c-0.5-0.3-1.1-0.4-1.7-0.4c-1.4,0-2.6,0.8-3.2,2l-5.4-1c-0.4-1.5-1.7-2.7-3.4-2.7 c-1.9,0-3.5,1.6-3.5,3.5c0,0.6,0.1,1.1,0.4,1.6l-3.2,3.2c-0.4-0.2-0.9-0.3-1.5-0.3c-1.9,0-3.5,1.6-3.5,3.5c0,1.9,1.6,3.5,3.5,3.5 c1.9,0,3.5-1.6,3.5-3.5c0-0.5-0.1-1-0.3-1.5l3.2-3.2c0.4,0.2,0.9,0.3,1.3,0.3c1.3,0,2.5-0.8,3.1-1.9l5.5,1.1 c0.4,1.5,1.8,2.5,3.3,2.5c1.9,0,3.5-1.6,3.5-3.5c0-0.4-0.1-0.9-0.2-1.3l5.8-5.8c0.4,0.1,0.8,0.2,1.2,0.2c1.9,0,3.5-1.6,3.5-3.5 C57.7,175.2,56.2,173.7,54.2,173.7").attr(iconStyle);
icon.intellectualProperty = R.path("M45.4,132c0.7,1.3,2.1,2.2,3.7,2.2s3-0.9,3.7-2.2H45.4z M53.2,125c0.7,0,1.5-0.7,1.5-1.5c0-6.3,5.5-7.1,5.5-15.1c0-6.1-5-11.1-11.1-11.1c-6.1,0-11.1,5-11.1,11.1 c0,8,5.5,8.9,5.5,15.1c0,0.7,0.7,1.5,1.5,1.5H53.2z M54,127c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,126.1,54,126.5,54,127 M54,130c0,0.5-0.4,0.9-0.9,0.9h-7.8c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9H53 C53.5,129.1,54,129.5,54,130").attr(iconStyle);
icon.money = R.path("M92.2,50.1c-2-3-4-5-1.3-5.5c0.4-0.1,2.2-0.3,2.7-0.2c0.6,0.1,1.1,0.4,1.7,0.6c0.7,0.3,1.5,0.3,2.2,0.4 c0.8,0,1.7-0.2,2.4-0.4c0.5-0.2,1.1-0.4,1.6-0.6c0.6-0.1,2.2,0.3,2.5,0.3c0.4,0.1,0.8,0.2,1,0.6c0.2,0.6-0.3,1.4-0.6,1.8 c-0.6,1-1.3,1.9-2,2.9l-0.8,1.1H93L92.2,50.1z M101.4,71.9h-8.2v-1.3l0.1-0.1c1.2-0.6,2-1.8,2-3.1c0-0.3,0-0.7-0.1-1.1h-1.9v-1.7H95 c-0.1-0.5-0.2-1.1-0.2-1.8c0-2.3,1.6-3.9,3.8-3.9c1.2,0,1.9,0.3,2.2,0.5l0.1,0.1l-0.5,1.7l-0.3-0.1c-0.2-0.1-0.7-0.4-1.6-0.4 c-1.5,0-1.8,1.1-1.8,2.1c0,0.7,0.1,1.3,0.2,1.7h2.7v1.7h-2.5c0,0.7,0,1.3-0.1,1.9c-0.2,0.7-0.5,1.2-1,1.7h5.2V71.9z M112.1,67 c-2.2-5.1-6.2-10.7-10.5-13.4h-8.7c-4.2,2.7-8.2,8.3-10.5,13.4c-2.2,5.1,0.4,10.2,5.5,10.2h18.6C111.6,77.2,114.3,72.2,112.1,67").attr(iconStyle);
var current = null;
for (var segment in wheel) {
(function (st, segment) {
st[0].onmouseover = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
if (segment == "people") {
st[0].onmouseover();
wheel.people.animate({ fill: '#005190', transform: 's1.05' }, 200);
wheel.people.toFront();
icon.people.animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
icon.people.toFront();
var bounce = Raphael.animation({transform: 's1.2'}, 500, "bounce").repeat(Infinity);
icon.people.animate(bounce);
icon.people.toFront();
}
})(wheel[segment], segment);
(function (st, segment) {
st[0].onclick = function () {
current && wheel[current].animate() && (document.getElementById(current).style.display = "");
document.getElementById(segment).style.display = "block";
current = segment;
};
})(wheel[segment], segment);
wheel[segment].color = "#005190";
wheel[segment].mouseover( myHover.bind(null, segment) )
icon[segment].mouseover( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].mousedown( myHover.bind(null, segment) )
icon[segment].mousedown( myHover.bind(null, segment) )
wheel[segment].touchstart( myHover.bind(null, segment) )
icon[segment].touchstart( myHover.bind(null, segment) )
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
wheel[segment].touchend( myHoverOut.bind(null, segment) )
icon[segment].touchend( myHoverOut.bind(null, segment) )
}
function myHover( type ) {
icon.people.stop();
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel[ type ].animate({ fill: '#005190', transform: 's1.05' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1.2' }, 200);
wheel[ type ].toFront();
icon[ type ].toFront();
}
function myHoverOut( type ) {
wheel[ type ].animate({ fill: '#1b2833', transform: 's1' }, 200);
icon[ type ].animate({ fill: '#FFFFFF', transform: 's1' }, 200);
icon.people.animate({ fill: '#FFFFFF', transform: 's1' }, 200);
wheel.people.animate({ fill: '#005190', transform: 's1' }, 200);
wheel.leadEntrepreneur.animate({ fill: '#252d38', transform: 's1' }, 200);
wheel.assets.animate({ fill: '#223343', transform: 's1' }, 200);
wheel.marketNeed.animate({ fill: '#20364b', transform: 's1' }, 200);
wheel.valuePrice.animate({ fill: '#1d3853', transform: 's1' }, 200);
wheel.supplyChain.animate({ fill: '#173c59', transform: 's1' }, 200);
wheel.legislatorsRegulators.animate({ fill: '#144162', transform: 's1' }, 200);
wheel.independantEndorsement.animate({ fill: '#0f436a', transform: 's1' }, 200);
wheel.underpinningScience.animate({ fill: '#0f4873', transform: 's1' }, 200);
wheel.intellectualProperty.animate({ fill: '#0d4b7c', transform: 's1' }, 200);
wheel.money.animate({ fill: '#0f5086', transform: 's1' }, 200);
}
};
</script>

It is slow because you are making too many dom access. Try reducing the use of document.getElementById in the click function. You can achieve this by either of the following:
Use the 'this' keyword inside the onclick function.
Send the dom element as parameter to the click function when it is declared.
PS: I do not know your complete application so there can be other ways too to reduce dom interaction.

Related

i am using fabricjs with reactjs and when the useEffect call i have initialize the canvas.
and draw a line with two circles top and bottom. when i pick image from computer and select over the lines the background image is removed.
`const refrenceLine = () => {
const canvas = canvasRef.current;
let isDraw = false;
const refrenceLineCircle1 = new fabric.Circle({
left: 50,
top: 50,
stroke: "black",
radius: 10,
fill: "",
transparentCorners: true,
});
refrenceLineCircle1.hasControls = false;
const refrenceCircle2 = new fabric.Circle({
left: 50,
top: 250,
stroke: "black",
radius: 10,
fill: "",
transparentCorners: true,
});
refrenceCircle2.hasControls = false;
const box1point = refrenceLineCircle1.getPointByOrigin("center", "bottom");
const box2point = refrenceCircle2.getPointByOrigin("center", "top");
// console.log("box1point.x1", box1point.x);
// console.log("box1point.y1", box1point.y);
// console.log("box2point.x2", box2point.x);
// console.log("box2point.y2", box2point.y);
const refrenceLineconnector = new fabric.Line(
[box1point.x, box1point.y, box2point.x, box2point.y],
{
stroke: "black",
strokeWidth: 2,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: true,
hasBorders: true,
lockMovementX: true,
lockMovementY: true,
hasRotatingPoint: true,
}
);
refrenceLineconnector.hasControls = false;
refrenceLineCircle1.on("moving", function () {
console.log("here");
const connectPoint = this.getPointByOrigin("center", "bottom");
refrenceLineconnector.set({
x1: connectPoint.x,
y1: connectPoint.y,
});
});
refrenceCircle2.on("moving", function () {
const connectPoint = this.getPointByOrigin("center", "top");
refrenceLineconnector.set({
x2: connectPoint.x,
y2: connectPoint.y,
});
});
canvas.add(refrenceLineCircle1, refrenceCircle2, refrenceLineconnector);
canvas.on("mouse:down", function (e) {
isDraw = true;
console.log("at start", e.target?.fill);
// if (e.target.fill == "green") {
// alert("green circle is clecked");
// } else alert("red cirecle is cleiked");
});
canvas.on("mouse:up", function (e) {
if (!isDraw) return;
// console.log("after end", e.e);
console.log("refrenceLineconnector", refrenceLineconnector);
});
};`

I'm trying to create one real-time flot and my problem is that I can't get to see the flot grid through the filling of my data's lines..
If you have any idea to get my filling a bit transparent like the picture below, I'd like to apply it as well on my Fiddle!
What I'm trying to achieve is something like that:
Picture of what I try to get
Here is the Fiddle on what I'm working:
My flot on Fiddle
Code:
$(function () {
getRandomData = function(){
var rV = [];
for (var i = 0; i < 10; i++){
rV.push([i,Math.random() * 10]);
}
return rV;
}
getRandomDataa = function(){
var rV = [];
for (var i = 0; i < 10; i++){
rV.push([i,Math.random() * 10 + 5]);
}
return rV;
}
getSeriesObj = function() {
return [
{
data: getRandomDataa(),
lines: {
show: true,
fill: true,
lineWidth: 5,
fillColor: { colors: [ "#b38618", "#b38618" ] },
tickColor: "#FFFFFF",
tickLength: 5
}
}, {
data: getRandomData(),
lines: {
show: true,
lineWidth: 0,
fill: true,
fillColor: { colors: [ "#1A508B", "#1A508B" ] },
tickColor: "#FFFFFF",
tickLength: 5
}
}];
}
update = function(){
plot.setData(getSeriesObj());
plot.draw();
setTimeout(update, 1000);
}
var flotOptions = {
series: {
shadowSize: 0, // Drawing is faster without shadows
tickColor: "#FFFFFF"
},
yaxis: {
min: 0,
autoscaleMargin: 0,
position: "right",
transform: function (v) { return -v; }, /* Invert data on Y axis */
inverseTransform: function (v) { return -v; },
font: { color: "#FFFFFF" },
tickColor: "#FFFFFF"
},
grid: {
backgroundColor: { colors: [ "#EDC240", "#EDC240" ], opacity: 0.5 }, // "Ground" color (May be a color gradient)
show: true,
borderWidth: 1,
borderColor: "#FFFFFF",
verticalLines: true,
horizontalLines: true,
tickColor: "#FFFFFF"
}
};
var plot = $.plot("#placeholder", getSeriesObj(), flotOptions);
setTimeout(update, 1000);
});
Thanks a lot!

You can use the rgba() color specification with flot to specify the fill color and alpha level (transparency):
fillColor: { colors: [ "rgba(179, 134, 24, .2)", "rgba(179, 134, 24, .2)" ] },
An alpha value of 0 is fully transparent, while an alpha value of 1 is fully opaque.

I am currently working with a jvectormap. Each county has a data-code (example: 48201). Here is my code for the counties that I have colored so far...
jvm.Map.maps = {};
jvm.Map.defaultParams = {
map: 'us_lcc_en',series: {
regions: [{
values: {
/* --------------- Active Franchise --------------- */
'42029':'#eb2e4d',
'42091':'#eb2e4d',
'42101':'#eb2e4d',
'42045':'#eb2e4d',
'42017':'#eb2e4d',
'42077':'#eb2e4d',
'42095':'#eb2e4d',
'48085':'#eb2e4d',
'48113':'#eb2e4d',
'48439':'#eb2e4d',
'48121':'#eb2e4d',
/* --------------- Available Franchise --------------- */
'42129':'#5d9eec',
'42007':'#5d9eec',
'42125':'#5d9eec',
'42019':'#5d9eec',
'42003':'#5d9eec',
'13067':'#5d9eec',
'13121':'#5d9eec',
'13057':'#5d9eec',
'13135':'#5d9eec',
'13089':'#5d9eec',
'13063':'#5d9eec',
'13151':'#5d9eec',
'13297':'#5d9eec',
'13117':'#5d9eec',
'48339':'#5d9eec',
'48201':'#5d9eec',
'48157':'#5d9eec',
'48167':'#5d9eec',
'48039':'#5d9eec',
'48029':'#5d9eec',
'48187':'#5d9eec',
'48091':'#5d9eec',
'04013':'#5d9eec',
'09003':'#5d9eec',
'09013':'#5d9eec',
'09001':'#5d9eec',
'09009':'#5d9eec',
'09007':'#5d9eec',
'09005':'#5d9eec',
/* --------------- Pending Franchise --------------- */
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute:'fill',
"stroke-width": 4
}]
},
backgroundColor: '#ffffff',
zoomButtons: true,
zoomOnScroll: false,
panOnDrag: true,
zoomMax: 8,
zoomMin: 1,
zoomStep: 1.6,
zoomAnimate: true,
regionsSelectable: false,
markersSelectable: false,
bindTouchEvents: true,
regionStyle: {
initial: {
fill: 'rgb(204, 204, 204)',
"fill-opacity": 1,
stroke: 'rgb(204, 204, 204)',
"stroke-width": 0,
"stroke-opacity": 1,
},
hover: {
"fill-opacity": 0.7,
cursor: 'pointer'
},
selected: {
fill: 'yellow'
},
selectedHover: {
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black',
},
hover: {
cursor: 'pointer'
}
},
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markerLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
}
};
jvm.Map.apiEvents = {
onRegionTipShow: 'regionTipShow',
onRegionOver: 'regionOver',
onRegionOut: 'regionOut',
onRegionClick: 'regionClick',
onRegionSelected: 'regionSelected',
onMarkerTipShow: 'markerTipShow',
onMarkerOver: 'markerOver',
onMarkerOut: 'markerOut',
onMarkerClick: 'markerClick',
onMarkerSelected: 'markerSelected',
onViewportChange: 'viewportChange'
};
As you can see at the bottom...the attribute is set to 'fill'. I also want to add 'stroke'. How do I go about adding that second attribute?

Attributes in a javaScript object are separated by commas. Suppose you wanted to add a stroke-width attribute:
In this case, you would change the tail end, near the bottom, to look something like this:
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute: 'fill',
stroke-width: 4
}]
},
Which should make you happy. Though, as an aside, stroke-width will actually be the third attribute of 'regions': you'll note that values is written in the form of "values: {...}," -- it's an attribute too!

First problem: When I put a hover event on a raphael path, the effect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, after mouseout it should stay filled with an active color. If I put a hover event on another path "last hovered path" must be filled with default color.
Second problem: When i put hover event on text - back path not fills with color.
This is my code.
var paths = {
part_1: {
name: 'part_1',
path: 'M194 139c-21,35 -33,76 -33,119 0,6 0,12 1,18l-125 10c-1,-9 -1,-18 -1,-28 0,-51 11,-99 30,-142 41,10 84,17 129,23z',
img: 'images/pol.png',
desc: "Теплые\nполы"
},
part_2: {
name: 'part_1',
path: 'M209 400l-97 78c-41,-52 -69,-116 -75,-186l125 -11c5,44 22,85 48,118z',
img: 'images/rad.png',
desc: 'Котлы\nи радиаторы'
},
part_3: {
name: 'part_1',
path: 'M116 483l97 -79c5,5 9,11 14,16 25,25 57,45 92,56l-36 120c-55,-18 -104,-48 -144,-87 -8,-8 -16,-17 -23,-26l0 0z',
img: 'images/lam.png',
desc: 'Светодиодное\n освещение'
},
part_4: {
name: 'part_1',
path: 'M454 478l36 120c-32,10 -66,15 -101,15 -35,0 -68,-5 -101,-14l36 -120c20,6 42,9 64,9 22,0 44,-3 64,-9z',
img: 'images/pol.png',
desc: 'Натяжные\nпотолки,\nаксессуары '
},
part_5: {
name: 'part_1',
path: 'M565 405l97 79c-7,9 -15,17 -23,25 -40,39 -89,70 -144,87l-36 -120c35,-11 66,-31 92,-56 5,-5 10,-10 14,-16l0 0z',
img: 'images/camera.png',
desc: 'Системы\nбезопасности'
},
part_6: {
name: 'part_1',
path: 'M666 479l-97 -80c26,-33 42,-72 47,-116l125 10c-7,70 -34,134 -75,186z',
img: 'images/vent.png',
desc: 'Вентиля-\nционные\nсистемы'
},
part_7: {
name: 'part_1',
path: 'M742 286l-125 -10c0,-6 1,-12 1,-18 0,-44 -12,-84 -33,-119 45,-6 88,-13 129,-23 19,44 30,92 30,142 0,10 0,19 -1,28z',
img: 'images/auto.png',
desc: 'Гаражные\nворота,\nрольставни'
}
}
function labelPath( pathObj, text, textattr )
{
if ( textattr == undefined )
textattr = { 'font-size': 18, fill: '#722d00', stroke: '#393738', cursor: 'pointer', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', 'font-weight': 'bold' };
var bbox = pathObj.getBBox();
var textObj = pathObj.paper.text( bbox.x + bbox.width / 4, bbox.y + bbox.height / 2, text ).attr( textattr );
return textObj;
}
$(function(){
var r = Raphael('map', 750, 625),
attributes = {
fill: '#FFC000',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round',
cursor: 'pointer'
},
attributes_circle = {
fill: '#fff',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
attributes_line = {
fill: '#fff',
stroke: '#fff',
'stroke-width': 7,
'stroke-linejoin': 'round'
},
attributes_min_circle = {
fill: '#fff',
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
icon = {
fill: '#FFC000',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
icon_inner = {
fill: '#fff',
stroke: '#393738',
'stroke-width': 0,
'stroke-linejoin': 'round'
}
arr = new Array();
var id = 23;
var a = 1;
for (var country in paths) {
var obj = r.path(paths[country].path);
//Init text
if(a <= 7){
var path_a = r.path(paths['part_' + a].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths['part_' + a].desc);
labelPath( path_a, sst);
}
a++;
//Fill stroke
if(paths[country].name=='circle'){
obj.attr(attributes_circle);
}else if(paths[country].name=='line'){
obj.attr(attributes_line);
}else if(paths[country].name=='min_circle'){
obj.attr(attributes_min_circle);
}else if(paths[country].name=='icon_inner'){
obj.attr(icon_inner);
}else if(paths[country].name=='icon'){
obj.attr(icon);
}
else{
obj.attr(attributes);
}
arr[obj.id] = country;
//Hover on element
obj
.hover(function(){
if(paths[arr[this.id]].name=='part_1'){
textattrs = { 'font-size': 18, fill: '#fff', stroke: '#393738', 'stroke-width': 0, "text-anchor":"start", 'stroke-linejoin': 'round', 'font-family': 'Arial,Helvetica,sans-serif', cursor: 'pointer', 'font-weight': 'bold' };
var path_a = r.path(paths[arr[this.id]].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths[arr[this.id]].desc);
labelPath( path_a, sst, textattrs);
this.animate({
fill: '#F3811E'
}, 0);
$(".img_behind").attr("src", paths[arr[this.id]].img);
}
}, function(){
if(paths[arr[this.id]].name=='part_1'){
var path_a = r.path(paths[arr[this.id]].path);
path_a.node.setAttribute("class","black_bor")
var sst = String(paths[arr[this.id]].desc);
labelPath( path_a, sst);
this.animate({
fill: attributes.fill
}, 0);
}
})
}
});
Any ideas on how can I solve this problems?
Here is my work.
Whole work on jsFiddle.

I don't understand the first problem, you may need to reexplain it a bit, which part isn't working ?
For the 2nd part, you need to add pointer-events: none to stop it stealing the event..
text { pointer-events: none; }
jsfiddle
If I'm understanding the first bit correct, I think you will need to remove the hoverout, and just change the hover to remove any existing hover effects ?

I'm use snapsvg library; Remove <use> element in IE11 doesn't work; How i can fix it?
c = Snap(400, 620);
c.rect(0, 0, 400, 620).attr({
fill : 'white',
stroke : 'black'
});
var pattern25x25;
var createDiodePattern = function () {
var p = c.group(),
selectedColor = "#ff6900",
fillColor = "#b7b7b7";
p.add(c.circle(12, 12, 30, 30).attr({fill: '#FFFFFF', stroke: '#FFFFFF', 'stroke-with': '1', opacity: '0.1'}));
p.add(c.rect(0, 0, 25, 25).attr({fill: fillColor, stroke: '#000000', 'stroke-with': '2'}));
p.add(c.rect(3, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.rect(16, 5, 5, 2).attr({fill: '#FFDE00', stroke: '#000000', 'stroke-with': '1'}));
p.add(c.circle(12, 12, 3, 3).attr({fill: '#FFFFFF', stroke: '#000000', 'stroke-with': '1'}));
pattern25x25 = p.toDefs();
};
createDiodePattern();
var items = [];
for(var i = 0; i< 10; i++){
var el = pattern25x25.use().attr({
x: i * 30,
y: i * 30
});
c.append(el);
items.push(el);
}
items.map(function(el){
el.click(function(){
el.remove();
});
})
Live Copy