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.

rendering multiple svgs

See original GitHub issue

I am trying to render multiple svg’s on a canvas. For eg: I have 3 svg elements, when I loop through the elements. when the second svg is render, it removes the first svg, when the third one renders, it removes the previous two svgs.

Even though I have the ignoreClear: true option added

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

gabelernercommented, Sep 14, 2019

if you remove width/height it works. i’ll reopen for now if somebody wants to dig in.

gabelernercommented, May 15, 2020
svg1 = '<svg><text x="50" y="50">Hello</text></svg>';
svg2 = '<svg><text x="50" y="100">World</text></svg>';

var opts = {
  ignoreClear: true,
  ignoreDimensions: true,
  ignoreMouse: true,
let list = [svg1, svg2]
let container = document.getElementById('container')
const canvas = document.createElement('canvas')
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');
list.forEach(function(svg) {
  canvg(canvas, svg, opts);

works just fine from your example to render multiple svgs. if you have a problem w/ a specific SVG, please open another issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple SVG Components not working or render as expected
Context: NextJS App. I have 5 different svgs, and created some Icon components with them: import React from 'react'; import { ReactComponent ...
Read more >
Page with multiple SVGs doesn't render properly
I have a page which includes two SVG images that were generated by tikz and then converted to SVG online. Both of them...
Read more >
Too Many SVGs Clogging Up Your Markup? Try `use`.
This works and renders just fine, but results in a bloated DOM tree, where each shape is represented as separate nodes. Displaying all...
Read more >
Which SVG technique performs best for way too many icons?
Inline SVGs still have one notable caveat: they have subpixel rendering. So if you center an area where icon is placed (like in...
Read more >
React, dynamically importing SVG's | by Eric Khoury - Medium
Rendering SVG's on a website can be made in a couple of different ways. ... Now we can easily render our SVGs without...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found