Manipulate svg #82
Description
Hello! I find this package very interesting.
I've been testing it and I don't know if there is a simple way to work with the SVG. Specifically, I do not know if it is possible to access the elements of the SVG by layers once it has already been included in the DOM.
I know that the DXF entities are available within the helper.parsed object, however, they are not directly linked to the SVG since the DOM, once the SVG is embedded, hardly contains any information about the original DXF (i.e. layers).
So far I have been able to directly modify the SVG before adding it to the DOM (eg adding ids or custom properties to the elements) but I don't think this is the most efficient approach, mainly because I can only add some simple properties that are not directly linked to the original DXF.
Here is my attempt.
foo(): string {
const helper = new Helper(dxf);
let svg = helper.toSVG();
const parser = new DOMParser();
const html = parser.parseFromString(svg, 'text/html');
const svg = html.getElementsByTagName('svg')[0];
svg.querySelectorAll('g').forEach((g, i) => {
if(g.hasAttribute('stroke')) g.setAttribute('id', i + '');
});
const encoder = new XMLSerializer();
return encoder.serializeToString(svg);
}
So, to sum up, I'd like to add a property to the elements for filtering them by layer in a later processing step (i.e. displaying elements by layer or hidding them). Any ideas are welcome.
Many thanks in advanced