Getting an error rendering SVG with fill-opacity defined in style
See original GitHub issuecanvg 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 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....
Read more >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.)
Read more >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...
Read more >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"" /_
Read more >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...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:
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
<script type="text/javascript" src="path_to_rgbcolor.js"></script>