CODEWITHSUNDEEP
javascriptsvghtml5-canvas
P.Ellis
P.Ellis

Reputation: 55

How do I read the viewbox attribute of an SVG in a canvas element?

I have added an SVG to a canvas element. How do I get access to read the viewbox attribute of the SVG?

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.id = "svgObjectElement";
img.type = "image/svg+xml";

img.onload = function(){

    ctx.drawImage(img,0,0);

};

img.src = "mySvg.svg";

Upvotes: 0

Views: 206

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101868

You can't. The browser will load the SVG and render it as a bitmap. All you have then is the Image() / HTMLImageElement. The actual SVG is gone by that point.

You would need to load the SVG separately. There are various ways to do that, eg. with AJAX, or create an <object> element in your DOM.

Upvotes: 1

Related Questions