javascript - SVG.js，从使用 "transform"导入的元素中删除/读取属性 "use"

Question

我正在使用 SVG.js 渲染棋盘。这个想法是，将这些片段保存在外部 svg 文件 sprite.svg 中，并将它们包含在 use 中。 ，像这样:

var pieceDrawn = svg.use(piece, "sprite.svg").move(x, y);

piece可能是wp白兵，在sprite.svg中:

<!-- white pawn //-->    
<g id="wp" transform="translate(225,0)">
    <path d="M 22,9 C 19.79,9 18,[...]"/>
</g>

sprite.svg 是在 Sketch 中创建的，因此该组具有 transform 属性。因此，当我 move(x,y) 元素时，转换 (255, 0) 被添加到移动中。如何读取转换属性的值或将其删除？ pieceDrawn没有children()，select()好像不行。

Answer 1

经过一番研究，我发现

无法使用 use 访问外部文件中包含的元素的属性

因为它们存储在 closed Shadow DOM 中.

因此，昨天，我编写了一个简单的实用程序，它可以通过 XMLHttpRequest 将 SVG Sprite 加载到页面中，删除转换 和不必要的 ID，并允许使用来自该 Sprite 的元素在网页的 SVG 中。像这样:

let svg = Svg.createSvg(document.getElementById("container"));
Svg.loadSprite("./assets/sprite.svg", ["star", "circle", "triangle", "smiley"]);
Svg.addElement(svg, "use", {"href": "#triangle", x: 10, y: 10});
Svg.addElement(svg, "use", {"href": "#smiley", x: 100, y: 10});

您可以在这里找到它:https://github.com/shaack/svjs-svg