0
195
Viewsresaltado de clic duplicado (clase CSS) al elemento correspondiente en múltiples SVG
Tengo dos SVG con los mismos elementos. Cuando hago clic en un elemento en SVG1, se resalta al alternar una clase CSS. Quiero que el mismo elemento en SGV2 se resalte automáticamente (NB: más adelante, querré poder modificar lo que está resaltado en SVG2 haciendo clic en SVG2).
Intenté hacer una tabla de conversión, de modo que cuando uso getElementById para capturar el clic de SVG1, esa ID se traduce a la ID correspondiente en SVG2, luego aplico la clase CSS, pero eso no funciona. ¿Alguna sugerencia sobre cómo debo hacer esto?
Aquí hay un JSfiddle: https://jsfiddle.net/scottmclaughlin/gynzou0t/21/
// changes colour of the clicked element function highlighter () { var ellipses = document.getElementById(this.id); ellipses.classList.toggle("keyHighlight"); // also duplicate highlight on second svg let duplicateEllipses = (ellipses) => translateTable[ellipses]; duplicateEllipses.classList.toggle("keyHighlight1"); }Sin relación, los SVG deben estar uno al lado del otro, pero el CSS de columna/fila no es correcto por alguna razón.
3 answers
Answer question0
ellipses es un elemento, no una identificación, y su uso de duplicateEllipses es extraño, se define como una función, pero se usa como un elemento. La forma lógica que creo que debes hacer es así:
let duplicateEllipses = document.getElementById(translateTable[this.id]); duplicateEllipses.classList.toggle("keyHighlight1");0
No es la forma más limpia, pero puedes probar:
let ellipses = document.querySelectorAll('.ellipsoid') ellipses.forEach(e => { e.addEventListener('click', function() { e.classList.toggle("keyHighlight") if (e.id.slice(-2) !== '-1') { let e1 = document.querySelector(`#${e.id}-1`) if (e1.classList.contains('keyHighlight') && e.classList.contains('keyHighlight')) { e1.classList.add("keyHighlight") } else if (!e1.classList.contains('keyHighlight') && e.classList.contains('keyHighlight')){ e1.classList.add("keyHighlight") } else { e1.classList.remove("keyHighlight") } } }) }) .keyHighlight {fill: #6CAD0E; opacity: 1;} .keyHighlight1 {fill: #6CAD0E; opacity: 1;} /* Create two equal columns that float next to each other */ .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .row { display: flex; } <html> <head> <meta charset="utf-8"> <title>duplicate test</title> </head> <body> <div class="row"> <div class="column"> <p>SVG1</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="250" id="fingering"> <ellipse class="ellipsoid" id="LH1" cx="66" cy="45" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> <ellipse class="ellipsoid" id="LH2" cx="66" cy="95" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> <ellipse class="ellipsoid" id="LH3" cx="66" cy="145" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> </svg> </div> <div class="column"> <p>SVG2</p> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="250" id="fingering1"> <ellipse class="ellipsoid" id="LH1-1" cx="66" cy="45" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> <ellipse class="ellipsoid" id="LH2-1" cx="66" cy="95" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> <ellipse class="ellipsoid" id="LH3-1" cx="66" cy="145" rx="20" ry="20" fill="#ffffff" stroke="#000000" pointer-events="all"/> </svg> </div> </div> </body> </html>0
Utilice un componente web estándar W3C <svg-circle-stack> para cada pila de puntos suspensivos.
(compatible con todos los navegadores modernos, no con IE)
El WebComponent registra oyentes en cada Ellipse para manejar el click ;
Y envía un Event , con carga útil de index , en cada clic a todos los puntos suspensivos.
Los puntos suspensivos con el mismo índice también alternarán el color.
No importa cuándo agregue más <svg-circle-stack> ; Usando Events , asegúrese de que siempre funcionen.
Cuando <svg-circle-stack> se elimina del DOM, limpia los oyentes establecidos fuera de su propio alcance en el document . (los controladores de clic se limpian automáticamente)
El posicionamiento lo haces tú mismo con CSS Grid o flexbox.
<style type="text/css"> .highlight { fill: gold } svg-circle-stack { width:90px; height:180px; display:inline-block; background:pink } svg-circle-stack ellipse { fill:white; stroke:black; pointer-events:all; cursor:pointer } svg-circle-stack ellipse:hover { stroke:lightgreen } </style> <svg-circle-stack></svg-circle-stack> <svg-circle-stack></svg-circle-stack> <svg-circle-stack></svg-circle-stack> <svg-circle-stack></svg-circle-stack> <script> customElements.define("svg-circle-stack", class extends HTMLElement { connectedCallback() { this.innerHTML = `<svg viewBox="15 0 100 190"> <ellipse cx="66" cy="45" rx="20" ry="20" /> <ellipse cx="66" cy="95" rx="20" ry="20" /> <ellipse cx="66" cy="145" rx="20" ry="20" /> </svg>`; this.ln = this.querySelectorAll("ellipse").forEach((ellipse, index) => { ellipse.onclick = (evt) => { ellipse.dispatchEvent(new CustomEvent("ellipseClick", { bubbles:true, detail:index })) } return document.addEventListener("ellipseClick", (evt) => { if (evt.detail == index) ellipse.classList.toggle("highlight"); }) }) } disconnectedCallback() { this.ln.forEach(ellipse => document.removeEventLister("ellipseClick")) } }); </script>