Question

我正在使用SVG.js来渲染棋盘。我们的想法是，将这些内容保存在外部svg文件 sprite.svg中并将其包含在use中，如下所示：

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

{p> 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）被添加到移动中。如何读取transformation属性的值或将其删除？ pieceDrawn没有children()，select()似乎无法实现。

Answer 1

经过一些研究后我发现了

无法使用use

从外部文件中包含的元素访问属性

因为存储在closed Shadow DOM 。

因此，昨天，我编写了一个简单的实用程序，它可以通过XMLHttpRequest将SVG sprite加载到页面中，删除转换和不必要的id，并允许来自SVG中的那个sprite的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

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

1 个答案: