Estoy haciendo un programa de visualización con d3 javascript.
Hay un gran grupo de líneas. todas las líneas deben comenzar con una opacidad de 0.1. En este gran grupo, hay algunos grupos pequeños. Cuando se activa un evento, uno de los grupos pequeños es visible y todos los demás grupos pequeños son invisibles. Qué grupo pequeño es visible depende del evento desencadenante. Quiero hacer que uno de los grupos pequeños sea visible y todos los demás grupos pequeños sean invisibles configurando el atributo de opacidad.
Entonces, ¿hay alguna palabra clave para que el grupo anule el atributo o el estilo de su padre? ¿O hay algún otro atributo o estilo similar que pueda anularse? De lo contrario, es posible que tenga que usar for loop para recorrer y modificar todos los grupos pequeños, lo que no es muy eficiente.
<svg width="1000" height="500"> <g class="big_group" style="opacity: 0;"> <g class='small_group inherit_opacity'> <line x1="100" y1="100" x2="200" y2="200" style="stroke: black;"></line> </g> <g class='small_group inherit_opacity'> <line x1="200" y1="100" x2="200" y2="200" style="stroke: black;"></line> </g> <g class='small_group' id='try_to_override_opacity_but_fail' style="opacity: 1;"> <line x1="300" y1="200" x2="200" y2="200" style="stroke: black;"></line> </g> </g> </svg>Intuitivamente pensé que podría haber algún tipo de palabra clave de "anulación" en "try_to_override_opacity_but_fail" para anular la opacidad en el grupo principal.
Solo si define la opacidad inicial con CSS, no con un atributo de style :
<svg viewBox="0 0 1000 500"> <style> g{ opacity:0; stroke:black; stroke-width:10; } </style> <g> <line x1="100" y1="100" x2="200" y2="200"></line> </g> <g> <line x1="200" y1="100" x2="200" y2="200"></line> </g> <g style="opacity:1;"> <line x1="300" y1="200" x2="200" y2="200"></line> </g> </svg>los archivos .svg funcionan bien con css, por lo que puede diseñarlos como:
svg { width: 200px; & > g { path:nth-last-of-type(2) { opacity: 0; } } }si necesita realizar cambios dinámicamente, debe leer sobre el estilo de los elementos por javascript;)