canvg playground

by jrdiaz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<div id="svg"></div>

<canvas id="canvas"></canvas>

JavaScript

svg = `<svg class="spider-canvas headless-spider spider-ipro" height="400" preserveaspectratio="xMinYMin" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">@keyframes fadeOut{to{opacity:0}}@keyframes fadeIn{to{opacity:1}}@media print{.no-print,.no-print *{display:none!important}}.no-transitions{transition-property:none!important}.no-animations{animation:none!important}.immediate-transforms{transition:all 0.3s,transform 0s!important}.no-selection,.spider-axis .spider-axis--title,.spider-axis .spider-axis--ticks{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.spider-hidden{opacity:0!important;pointer-events:none!important}.spider-dashed{stroke-dasharray:5 5}.drag{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.dragging{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.spider-container{position:relative;box-sizing:content-box;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden}.spider-container svg{shape-rendering:auto}.spider-canvas{image-rendering:auto;overflow:visible}.spider-canvas.immediate-transforms g{transition:all 0s!important}.spider-canvas &gt;foreignObject{pointer-events:none}.spider-chart--background{stroke:transparent;stroke-width:0}.spider-button{pointer-events:all;display:inline-block;cursor:pointer}.spider-button &gt;*{pointer-events:none}.spider-button .spider-button-border{pointer-events:none}.spider-button .spider-button-icon{pointer-events:none}.spider-button .spider-button-target{pointer-events:all}.spider-curve{fill:none}.spider-line{fill:none;stroke-linecap:round}.spider-line .spider-line--focusline{stroke-width:0}.spider-label{pointer-events:none;transition:all 0.3s}.spider-label .spider-label--text{text-overflow:ellipsis;overflow:hidden}.spider-bubble...