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

Posted 2023-03-14

【中文标题】SVG.js，从使用“use”导入的元素中删除/读取属性“transform”

【英文标题】：SVG.js, remove/read attribute "transform" from elements imported with "use"

【发布时间】：2017-11-22 13:08:40

【问题描述】：

我正在使用 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()好像是不可能的。

【参考方案1】：

经过一番研究，我发现

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

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

因此，昨天，我编写了一个简单的实用程序，它可以通过 XMLHttpRequest 将 SVG 精灵加载到页面中，删除转换和不必要的 id，并允许在网页的 SVG 中从该精灵中 use 元素.像这样：

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