question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVGLoader doesn't support use and defs tags

See original GitHub issue
Description of the problem

As described in the title, SVGLoader doesn’t support the <use> and <defs> tags. As a result, SVGs like this one are rendered incorrectly: 664e80e8d8d98482.txt

Three.js version
  • Dev
  • r115
Browser
  • All of them
OS
  • All of them
Hardware Requirements (graphics card, VR Device, …)

None

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
yomboprimecommented, Mar 7, 2021

With #21380 (and probably other PRs related to number parsing) now it is solved. It looks like this:

imagen

1reaction
yomboprimecommented, Nov 12, 2020

However, the test file is not yet rendered correctly. Probably a different issue.

Yes, must be a different issue.

I’ve removed the defs and use, spread the letters programmatically in the html, and they show wrong. So the issue is not with the defs tag.

imagen

mesh.position.x += i * 10;

latextest_without_defs.txt

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue-svg-loader removes tags when loading the svg file
Unfortunately, it looks like there is no working solution with this package, see https://github.com/visualfanatic/vue-svg-loader/issues/154.
Read more >
svg-loader: A Different Way to Work With External SVG
Simply put, it fetches the SVG files via XHR and loads them as inline elements, allowing you to customize the properties like fill...
Read more >
<defs> - SVG: Scalable Vector Graphics - MDN Web Docs
Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for...
Read more >
SVGs not displaying in Chrome (Example) - Treehouse
The file paths are correct, but the SVGs are only displaying broken image icons, and the SVG used for a background image is...
Read more >
Using SVG and Vue.js: A complete guide - LogRocket Blog
It may not be worth the trouble to bring an SVG file into a Vue component in a situation where it's merely a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found