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.

This SVG does not render correctly in canvg

See original GitHub issue

I used the canvg test page on this svg string:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" viewBox="600 400 1200 1300" height="32px" width="19px">
  <defs><pattern id="multiband" width="1" height="3" patternContentUnits="objectBoundingBox"><path fill="#ff0000" d="M 0.5 0.31666666666666665 L 0.5 0.95 A 1 0.6333333333333333 0 0 0 1.3660254037844388 1.4062824978585316e-16 Z" /><path fill="#00ff00" d="M 0.5 0.31666666666666665 L 1.3660254037844388 1.4062824978585316e-16 A 1 0.6333333333333333 0 0 0 -0.3660254037844385 -2.812564995717063e-16 Z" /><path fill="#0000ff" d="M 0.5 0.31666666666666665 L -0.3660254037844385 -2.812564995717063e-16 A 1 0.6333333333333333 0 0 0 0.4999999999999998 0.95 Z" /></pattern></defs>
  <g id="svg_1">
     <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#multiband)" stroke="#000000" stroke-width="90" stroke-miterlimit="10" d="m1174.939941,1873.629028c-38.765869,-190.301025 -107.115967,-348.665039 -189.902954,-495.439941c-61.406982,-108.87207 -132.543945,-209.363037 -198.364014,-314.937988c-21.971985,-35.244019 -40.93396,-72.477051 -62.046997,-109.054077c-42.215942,-73.136963 -76.44397,-157.934998 -74.268982,-267.932007c2.125,-107.472961 33.208008,-193.68399 78.029968,-264.171997c73.719055,-115.934967 197.20105,-210.988983 362.884033,-235.968979c135.466064,-20.423996 262.475098,14.082001 352.542969,66.748001c73.600098,43.037994 130.596069,100.527008 173.920044,168.279999c45.219971,70.716003 76.359009,154.26001 78.970947,263.231995c1.337036,55.830017 -7.804932,107.531982 -20.68396,150.417969c-13.033936,43.409058 -33.995972,79.695007 -52.645996,118.454041c-36.406006,75.658997 -82.04895,144.981995 -127.85498,214.346008c-136.437012,206.605957 -264.496094,417.309937 -320.580078,706.026978z" id="svg_2"/>
	  </g></svg>

This is the difference:

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

gabelernercommented, Apr 15, 2019

that smaller example helps … if you remove x="-14.4" y="-14.4" from the pattern it begins working, although it’s not the right opacity so there’s a bug w/ fill-opacity.

so current bugs for this issue are:

x/y coordinates on pattern, maybe negative ones, don’t render
fill-opacity does not work when there are patterns

but we made some progress!

0reactions

SnooHDcommented, Jun 27, 2019

The fill-opacity also doesn’t work with gradients. I have not tested masks, but i presume this issue will be with any fill url

<svg width="792" height="600" viewBox="0 0 792 600">
  <defs>
    <linearGradient id="302" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:1;"></stop>
      <stop offset="60%" style="stop-color:#000;stop-opacity:1;"></stop>
    </linearGradient>
  </defs>
  <path stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="url(#302)" fill-opacity="0.2" fill-rule="evenodd" pointer-events="visiblePainted" shape-rendering="geometricPrecision" d="M406.000000,300.000000L399.090170,309.510565L387.909830,305.877853L387.909830,294.122147L399.090170,290.489435Z" />
</svg>

It can, for now, be resolved using stop-opacity or using rgba values instead.