#javascript #jquery #svg
Вопрос:
Итак, у меня есть простая группа SVG:
lt;g id="interceptor"gt; lt;ellipse cx="0" cy="15" rx="6" ry="14" fill="url(#gradient)"/gt; lt;polygon points="0,-20 7,10 0,0 -7,10" fill="blue"/gt; lt;polygon points="0,-20 7,10 0,0" fill="darkblue"/gt; lt;/ggt; Который я затем использую вот так:
lt;g class="ship" id="ship3" transform="rotate(-180,480,24) translate(480,24)"gt; lt;use xlink:href="#interceptor"/gt; lt;/ggt; Теперь я хотел бы добавить обводку вокруг первого многоугольника из группы при нажатии на всю группу, но я не знаю, как получить доступ к содержимому группы перехватчиков с помощью jQuery. Я думал о чем-то подобном, но contents() ничего не возвращает:
$(".ship").click(function() { $(this).find("use").contents().find("polygon").first().attr({"stroke-width":1, stroke:"white"}); }); Я, конечно, могу добавить обводку вокруг всего «.ship», и это работает, но это не то, что я хочу, потому что это создает обводки между полигонами в группе. Кроме того, может быть несколько отдельных объектов, которые используют группу #перехватчик, и только тот, который фактически нажат, должен получить обводку. Это выполнимо?
Комментарии:
1. Вам было бы намного проще, если бы вы перестали использовать элементы lt;usegt; и просто использовали нужные вам элементы напрямую.
2. Да, но, как я уже сказал, мне, возможно, придется много раз повторно использовать группу #перехватчик. Я бы предпочел не определять это каждый раз заново.
3. таким образом, каждый раз, когда вы меняете штрих, вам нужно обновлять все экземпляры элемента lt;usegt;? В любом случае, если у вас lt;usegt; нет содержимого (), вам придется перейти по ссылке xlink:href, чтобы найти элемент, на который он указывает.
4. Было бы проще просто иметь две версии перехватчика, одну с штрихом, а другую без, а затем переключать их по щелчку, например:
$(this).find('use').attr('xlink:href', '#interceptorWithStroke');