Entonces, tengo un grupo SVG simple:
<g id="interceptor"> <ellipse cx="0" cy="15" rx="6" ry="14" fill="url(#gradient)"/> <polygon points="0,-20 7,10 0,0 -7,10" fill="blue"/> <polygon points="0,-20 7,10 0,0" fill="darkblue"/> </g>Que luego uso así:
<g class="ship" id="ship3" transform="rotate(-180,480,24) translate(480,24)"> <use xlink:href="#interceptor"/> </g>Ahora, lo que me gustaría hacer es agregar un trazo alrededor del primer polígono del grupo cuando se hace clic en todo el grupo, pero no sé cómo acceder al contenido del grupo interceptor a través de jQuery. Estaba pensando en algo como esto, pero contenidos () no devuelve nada:
$(".ship").click(function() { $(this).find("use").contents().find("polygon").first().attr({"stroke-width":1, stroke:"white"}); });Puedo, por supuesto, agregar un trazo alrededor de todo el ".barco" y funciona, pero no es lo que quiero porque crea trazos entre los polígonos del grupo. Además, puede haber una cantidad de objetos separados que usan el grupo #interceptor, y solo el que realmente se hace clic debe recibir el trazo. ¿Es factible?