<use> tag doesn't work in playground

listopadiya commented 3 years ago

Describe the bug DOMPurify is used to sanitize all input text in playground, and by default it filters <use> elements out, so in both SVG and PDF outputs they are not visible. Also it leads to <use> elements not preserved in playground url.

One possible solution will be to use workaround provided by DOMPurify developers here, it will allow to safely use internal references. It can be placed here: https://github.com/yWorks/svg2pdf.js/blob/929a2ba18bd55fa04bc012da9b5f6c8646a79c7d/playground/index.js#L28

To Reproduce Check this code in playground:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100" viewBox="0 0 200 100">
  <title>Style inheritance and the use element</title>
  <style type="text/css">
    use { fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40" />
  </g>
  <use xlink:href="#c" x="100" />
</svg>

Screenshot Note: I changed height of input and output boxes in chrome devtools, so that it takes less space in screenshot.

Expected behavior Example from above should result in two circles output (blue and orange), like in this codepen.

Desktop (please complete the following information):

OS: Windows 10 Pro 10.0.18363 Build 18363
Browser: Chrome 85.0.4183.121

HackbrettXXX commented 3 years ago

Thanks for the issue report. Could you prepare a PR with the workaround you suggest?

listopadiya commented 3 years ago

Sure, you can assign it to me! I was thinking that this issue in a way blocks comprehensive playground testing for #152 , so it would be nice to have it fixed first, and I can try it.

yWorks / svg2pdf.js

<use> tag doesn't work in playground #155