fuzhenn / node-svg2img

A high-performance in-memory convertor to convert svg to png/jpeg images for Node.
MIT License
158 stars 37 forks source link

Masks do not work #24

Open loderer opened 4 years ago

loderer commented 4 years ago

The following svg is an example on how to use masks, taken from mozilla.org:

<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />
    <!-- Everything under a black pixel will be invisible -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
  <polygon points="-10,110 110,110 110,-10" fill="orange" />
  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>

The rendered svg looks like this: grafik

After converting it to jpeg, the result looks like this: grafik

To convert the svg i used the following command:

svg2img(svgString, {format:'jpg','height':500,'width':500}, function(error, buffer) {
    //default jpeg quality is 75
    fs.writeFileSync('foo5.jpg', buffer);
});

If i use the same code to convert a svg without a mask, it works fine. Am I doing something wrong, or is it actually a bug?

fuzhenn commented 4 years ago

I thinks it's a bug due to the upsteam canvg