felixfbecker / dom-to-svg

Library to convert a given HTML DOM node into an accessible SVG "screenshot".
MIT License
380 stars 42 forks source link

inlineResources not working (fetchResource() Error: No URL passed) #170

Open eckynde opened 2 years ago

eckynde commented 2 years ago

Before I begin, thank you for this awesome library.

inlineResources is not working: Error stack

This error was introduced in version 0.11.5 (issue #113, fix #116). Version 0.11.4 works fine. See screenshots below. I suspect that fetchURL doesn't know to look in xlink:href instead of href. Therefore element.href.baseVal is undefined and it outputs No URL passed (inline.ts, line 27)

JavaScript code used I'm using the CDN version as recommended in #135. I've tested both versions.

async function takeSVGScreenshot(){
    console.log('[IK SVG] Importing dependencies...');
    const { elementToSVG, inlineResources } = await import('https://cdn.skypack.dev/dom-to-svg@0.11.5'); // or 0.11.4
    console.log('[IK SVG] Taking snapshot...');
    const svgDocument = elementToSVG(document.querySelector('#qtlw13'));
    console.log('[IK SVG] Inlining resources...');
    await inlineResources(svgDocument.documentElement); // <-- this is where the error occurs
    console.log('[IK SVG] Serializing...');
    const svgString = new XMLSerializer().serializeToString(svgDocument);
    console.log('[IK SVG] Sending data back to server...');
    callHTMLClient( '{"Sender":"TakeSVGScreenshot", "Data":"' + svgString.replace(/\"/g, '\\"') + '"}');    
    console.log('[IK SVG] Done');
}

Version 0.11.4 image

Version 0.11.5 image don't mind the impossible geometry :)

eckynde commented 2 years ago

This is on Google Chrome 95. It's not an issue on Firefox 94 yet. xlink:href was deprechated in SVG 2 (MDN, spec from 2018)

Using element.getAttribute('xlink:href') instead of element.href.baseVal works. Using element.getAttributeNS('http://www.w3.org/1999/xlink', 'href')also works. Tested both on Chrome and Firefox. Assigning the url to both the xlink:href and href attribute could probably also fix it (messy though).

Sadly I'm currently unable to make and test a pull request :/

iolh commented 2 years ago

谢谢,这很有帮助。

eckynde commented 2 years ago

This issue on the Inkscape issue tracker

eckynde commented 1 year ago

@BoutValentin Thank you for writing a workaround (#183) - that would certainly work.

The original issue within Inkscape has been fixed by now (inkscape issue 620) and will be part of their release 1.3, which is going to render #113 and the corresponding pull request #116 obsolete.

Therefore I suggest undoing the changes in #116 to confirm to the SVG2.0 spec again as soon as Inkscape 1.3 has been released.

jduvk commented 7 months ago

Inkscape 1.3 has been released on July 23, 2023.