Canvg conversion - weird behavior when using a fill url

Question

I'm trying to convert svg to canvas using the canvg js lib.

The original svg contains a rect which has a fill attribute of url to a svg pattern. When I convert the svg to canvas using canvg:

canvg(document.getElementById('canvas'), svg);

The image of the rect fill changes its proportions (The width and the height change).

This shows the svg before and after the conversion.

Does anyone have an idea for solving this issue?

z1m.in · Accepted Answer · 2015-10-22 11:37:10Z

0

http://jsfiddle.net/L3hondLn/230/

I'm changed

<pattern id="img1" width="20" height="20">

to

<pattern id="img1" width="200" height="200">

And it's work.

answered Oct 22, 2015 at 11:37

z1m.in

1,66113 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rivka Over a year ago

Thanks, but in my app jsfiddle.net/L3hondLn/231 I have many circles, and changing the pattern size doesn't help, since they are different from each other.

Rivka Over a year ago

I want the canvas to look exactly as the svg. can you try to edit the second fiddle?

Collectives™ on Stack Overflow

Canvg conversion - weird behavior when using a fill url

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related