SVG.js，移除/读取属性"transform"从使用"use"导入的元素中 [英] SVG.js, remove/read attribute "transform" from elements imported with "use"

问题描述

我正在使用SVG.js渲染棋盘.想法是，将片段保存在外部svg文件 sprite.svg中，并将其包含在

I am using SVG.js to render a chessboard. The idea is, to keep the pieces in an external svg-file sprite.svg and include them with use, like this:

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

在sprite.svg中，

piece可能是wp白色典当:

piece may be wp white pawn, in the 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()似乎不可能.

sprite.svg was created in Sketch, therefore the group has an attribute transform. So when I move(x,y) the element, the transformation (255, 0) is added to the moving. How can I read the value of the transformation-attribute or remove it? pieceDrawn has no children(), select() seems not to be possible.

推荐答案

经过一些研究，我发现

无法使用use

it is not possible to access attributes from elements included from external files with use

因为它们存储在

because they are stored in a closed Shadow DOM.

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

Therefore, yesterday, I wrote a simple utility which can load SVG sprites into the page via XMLHttpRequest, removes transforms and unnecessary ids and allows to use elements from that sprite in SVGs of the webpage. Like this:

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

You can find it here: https://github.com/shaack/svjs-svg

这篇关于SVG.js，移除/读取属性"transform"从使用"use"导入的元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！