获取svg use标签内的元素

先讲结论：我查阅了文档，暂时也没有方法可以获取到<use>标签内的元素。

我试图使用

1. $("#useId").find("#contentId").attr(“attr”) – 无效
2. $("#contentId").attr(“attr”) – 未达到预期，选中defs内组件
3. $("#shadow-root").remove() – 无效，主要原因就是因为#shadow-root 下面会讲
4. D3选择器等等

为什么获取不到use标签内的元素？

通过查dom我们可以看到使用svg画布中使用use标签的引用会多一层影子DOM解构 #shadow-root

• 影子DOM结构不属于主DOM树，为只读元素，所以获取不到use标签内的元素。

解决方案

1. 在defs组件内添加class，通过样式表去控制需要更改的属性

   存在局限性：class为全局属性，元素越多，样式越多，不利于区别每一个元素

   案例参考地址： 案例

2. 不使用defs组件封装 <个人方案>
   封装在函数里面，每次调用去new一个新的图形，将需要更改的属性通过传参方式加以区别

参考链接

MDN

删除 #shadow-root

shadow-dom 浅析