Tengo un archivo SVG (en línea en una página HTML) con unos 60 botones .
Cada uno de ellos tiene dos estados adicionales , cada uno de los cuales tiene un ID de la forma:
<g id="mov0-1"><!-- mouseover state --> <g id="mod0-1"><!-- mousedown state -->Inicialmente, los estados mouseover y mousedown están ocultos en CSS :
g[id^='mod'] { display: none; } g[id^='mov'] { display: none; }Cuando hay un mouseover, el estado debería cambiar, usando esta función:
var obj = document.getElementById('link' + c + '-' + x); obj.addEventListener('mouseover', mov.bind(null, x, c), false); ... function mov(x, c){ var obj_id = 'mov' + c + '-' + x; var obj = document.getElementById(obj_id); obj.style.display = 'block'; }La función anterior falla. Sin embargo, si reemplazo el signo de intercalación CSS con una lista de botones individuales, la función funciona :
g#mov1-0{display:none;} g#mod1-0{display:none;}¿Por qué está pasando esto?
¿Hay alguna manera de mantener mi elegante solución de dos líneas que oculta 120 botones en lugar de tener que enumerarlos todos por separado?
NB : Adobe Illustrator genera automáticamente los SVG y no puedo usar las clases de CSS .
Así que fue un error estúpido.
Los objetos principales también tenían ID que comenzaban con mov y mot , por lo que cuando oculté los botones no utilizados, también oculté sus contenedores principales.
Lección 1: tenga cuidado con los comodines .
Lección 2: cuando algo se rompe, no asuma que se debe a algún problema técnico elaborado en lugar de a un error estúpido .
Lección 3: construir un caso de prueba simple para reproducir el problema .
Cambiar el nombre de los contenedores principales (capas de Illustrator) solucionó el problema.