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.

Getting an error rendering SVG with fill-opacity defined in style

See original GitHub issue

canvg fails to render the following SVG (note that it works if we remove ‘fill-opacity:0’ parameter):

<svg viewBox="0 0 400 400"> <g>
    <ellipse style="fill: none; fill-opacity:0; stroke-width: 1.6; stroke: #000000" cx="150" cy="150" rx="150" ry="150"></ellipse>
</g></svg>

Stack trace:

Uncaught TypeError: t is not a constructor
    at r.Property.addOpacity (canvg.min.js:1)
    at r.Element.ellipse.setContext (canvg.min.js:1)
    at r.Element.ellipse.render (canvg.min.js:1)
    at r.Element.g.renderChildren (canvg.min.js:1)
    at r.Element.g.render (canvg.min.js:1)
    at r.Element.svg.renderChildren (canvg.min.js:1)
    at r.Element.svg.render (canvg.min.js:1)
    at a (canvg.min.js:2)
    at Object.r.loadXmlDoc (canvg.min.js:2)
    at Object.r.loadXml (canvg.min.js:2)

Issue Analytics

State:
Created 7 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

MichalStojcommented, Aug 28, 2017

I’ve had the same issue. As @sameerjain wrote above - You need to reference all 3 js libraries: rgbcolor.js, StackBlur.js and canvg.js

As canvg description states:

Usage

Include the following files in your page:

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>

2reactions

sameer-kumar-jaincommented, Aug 24, 2017

you need to use rgbcolor.js from http://www.phpied.com/rgb-color-parser-in-javascript/ and add it before canvg import on the page

Top Results From Across the Web

SVG fill color transparency / alpha? - Stack Overflow

You use an addtional attribute; fill-opacity : This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent....

fill-opacity - SVG: Scalable Vector Graphics - MDN Web Docs

The fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.)

Painting: Filling, Stroking and Marker Symbols — SVG 2

The fill and stroke properties, defined below, are used to specify the paint used to render the interior of and the stroke around...

Bullet Chart Sparkline SVG Not Rendering in Table

The Bullet Charts will not render in the table I just get an "Image" icon in the ... height=""50"" style=""fill:%23f2f2f2;stroke-width:0;fill-opacity:1"" /_

Make any SVG responsive with this React component

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. I don't know about you, but I had...