Ich habe 4 SVG mit mehreren Pfaden. Ich habe eine Kopie auf dieser SVG in einem anderen Panel (diese Svg ist nicht anklickbar). Wenn ich auf den anklickbaren SVG-Pfad klicke, fülle ich den Pfad mit einer anderen Farbe.Click-Ereignis auf Raphael js Pfad simulieren
Ich habe eine Schaltfläche erstellt, um alle Pfade, die auf dem ersten SVG gefärbt sind, in das zweite SVG zu importieren. Dazu muss ich ein Klick-Event auf den guten Pfaden simulieren. Um den übereinstimmenden Pfad zu finden, verwende ich das Attribut d=
des Pfades.
Hier ist mein Code Ereignis auf jedem Pfad hinzuzufügen:
function buildEvent(regions, area) {
for(var regionName in regions) {
(function (region) {
region.attr(style);
region.node.name = regionName;
region.data('clicked', false);
region[0].addEventListener("mouseover", function() {
if (!region.data('clicked')) region.animate(hoverStyle, animationSpeed);
}, true);
region[0].addEventListener("mouseout", function() {
if (!region.data('clicked')) region.animate(style, animationSpeed);
}, true);
region[0].addEventListener("click", function() {
if (region.data('clicked')) {
region.attr("fill", "#ddd");
region.data('clicked', false);
json_data[area][region.node.name] = false;
}else{
region.attr("fill", "#A8BED5");
region.data('clicked', true);
json_data[area][region.node.name] = true;
}
}, true);
})(regions[regionName]);
}
}
Und hier ist mein Code, wenn ich auf die Schaltfläche Import klicken
$('#btn-import').on('click', function() {
$('.tab-pane.active svg path').each(function() {
if ($(this).attr('fill') == '#A8BED5') {
var to_fill = $("#form svg path[d='" + $(this).attr('d') + "']");
// to_fill.trigger('click');
// to_fill[0].trigger('click');
// to_fill.click();
to_fill[0].click();
}
});
});
Wie Sie habe ich versucht, 4 Möglichkeiten zu sehen Auslöser für mein Klickereignis Ich verstehe nicht, warum das Klickereignis nicht ausgelöst wird. to_fill
Variable ist das gute Objekt Ich denke, weil ich das fill
Attribut meinen Weg bekommen kann, wenn ich tat:
console.log(to_fill.attr('fill') // output #dddddd