1

仅在 IE edge中没有生成画布，而是出现了一个黑框。使用的插件是 Canvg

svg = '<svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="100" height="67" viewBox="0 0 100 67"><desc>Created with Highcharts 5.0.14</desc><defs><clipPath id="highcharts-8vlow00-5"><rect x="0" y="0" width="80" height="42" fill="none"></rect></clipPath></defs><rect fill="rgba(0,0,0,0)" class="highcharts-background" x="0" y="0" width="100" height="67" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="10" y="10" width="80" height="42"></rect><g class="highcharts-grid highcharts-xaxis-grid "><path fill="none" class="highcharts-grid-line" d="M 10.5 10 L 10.5 52" opacity="1"></path><path fill="none" opacity="1" class="highcharts-grid-line" d="M 82.5 10 L 82.5 52"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" class="highcharts-grid-line" d="M 10 52.5 L 90 52.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 10 10.5 L 90 10.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="10" y="10" width="80" height="42"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-axis-line" d="M 10 52 L 90 52"></path></g><g class="highcharts-axis highcharts-yaxis "><path fill="none" class="highcharts-axis-line" d="M 10 10 L 10 52"></path></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-area-series highcharts-color-undefined " transform="translate(10,10) scale(1 1)" clip-path="url(#highcharts-8vlow00-5)"><path fill="rgb(255,255,69)" d="M 9.4989106753813 42 L 9.4989106753813 42 L 12.403776325345 39.375 L 15.308641975309 36.75 L 18.213507625272 34.125 L 21.118373275236 31.5 L 24.0232389252 28.875 L 26.928104575163 26.25 L 29.832970225127 23.625 L 32.737835875091 18.375 L 35.642701525054 13.125 L 38.547567175018 7.875 L 41.452432824982 2.625 L 44.357298474946 5.25 L 47.262164124909 5.25 L 50.167029774873 7.875 L 53.071895424837 13.125 L 55.9767610748 18.375 L 58.881626724764 23.625 L 61.786492374728 26.25 L 64.691358024691 28.875 L 67.596223674655 31.5 L 70.501089324619 34.125 L 73.405954974582 36.75 L 76.310820624546 39.375 L 79.21568627451 42 L 79.21568627451 42 L 76.310820624546 42 L 73.405954974582 42 L 70.501089324619 42 L 67.596223674655 42 L 64.691358024691 42 L 61.786492374728 42 L 58.881626724764 42 L 55.9767610748 42 L 53.071895424837 42 L 50.167029774873 42 L 47.262164124909 42 L 44.357298474946 42 L 41.452432824982 42 L 38.547567175018 42 L 35.642701525054 42 L 32.737835875091 42 L 29.832970225127 42 L 26.928104575163 42 L 24.0232389252 42 L 21.118373275236 42 L 18.213507625272 42 L 15.308641975309 42 L 12.403776325345 42 L 9.4989106753813 42 L 9.4989106753813 42" class="highcharts-area"></path><path fill="none" d="M 9.4989106753813 42 L 12.403776325345 39.375 L 15.308641975309 36.75 L 18.213507625272 34.125 L 21.118373275236 31.5 L 24.0232389252 28.875 L 26.928104575163 26.25 L 29.832970225127 23.625 L 32.737835875091 18.375 L 35.642701525054 13.125 L 38.547567175018 7.875 L 41.452432824982 2.625 L 44.357298474946 5.25 L 47.262164124909 5.25 L 50.167029774873 7.875 L 53.071895424837 13.125 L 55.9767610748 18.375 L 58.881626724764 23.625 L 61.786492374728 26.25 L 64.691358024691 28.875 L 67.596223674655 31.5 L 70.501089324619 34.125 L 73.405954974582 36.75 L 76.310820624546 39.375 L 79.21568627451 42" class="highcharts-graph" stroke="rgb(255,255,69)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -0.5010893246187003 42 L 9.4989106753813 42 L 12.403776325345 39.375 L 15.308641975309 36.75 L 18.213507625272 34.125 L 21.118373275236 31.5 L 24.0232389252 28.875 L 26.928104575163 26.25 L 29.832970225127 23.625 L 32.737835875091 18.375 L 35.642701525054 13.125 L 38.547567175018 7.875 L 41.452432824982 2.625 L 44.357298474946 5.25 L 47.262164124909 5.25 L 50.167029774873 7.875 L 53.071895424837 13.125 L 55.9767610748 18.375 L 58.881626724764 23.625 L 61.786492374728 26.25 L 64.691358024691 28.875 L 67.596223674655 31.5 L 70.501089324619 34.125 L 73.405954974582 36.75 L 76.310820624546 39.375 L 79.21568627451 42 L 89.21568627451 42" stroke-linejoin="round" visibility="visible" stroke="rgba(192,192,192,0.0001)" stroke-width="22" class="highcharts-tracker"></path></g><g class="highcharts-markers highcharts-series-0 highcharts-area-series highcharts-color-undefined highcharts-tracker " transform="translate(10,10) scale(1 1)"></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels "></g><g class="highcharts-axis-labels highcharts-yaxis-labels "></g></svg>';

canvg(document.getElementById('canvas'), svg);

小提琴链接：http: //jsfiddle.net/6r2jug6o/574/

4

0 回答 0