Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
listopadiya opened this issue Oct 5, 2020 · 2 comments · Fixed by #156
Closed

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

listopadiya opened this issue Oct 5, 2020 · 2 comments · Fixed by #156
Assignees

Comments

@listopadiya
Copy link
Contributor

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:

const svgText = DOMPurify.sanitize(doc.getValue())

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

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
Copy link
Member

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

@listopadiya
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants