1

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);

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 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.

shaack
  • 171
  • 8

1 Answers1

1

After doing some research I found out that

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

because they are stored in a closed Shadow DOM.

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});

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

shaack
  • 171
  • 8