Question

以下svg仅以chrome / chromium呈现。在其他浏览器中不抽取。例如。火狐，野生动物园。我创造了jsfiddle

<!DOCTYPE html>
    <html>
        <head>
            <title>color test</title>
            <style type="text/css">
                canvas {
                    border: 1px solid black;
                }
            </style>
        </head>
        <body>
            <canvas id="c"  width="400" height="400"></canvas>

            <script type="text/javascript">
                var canvas = document.getElementById('c');
                var ctx = canvas.getContext('2d');

                var data = svg_data;   // please see in the jsfiddle

    var DOMURL = window.URL || window.webkitURL || window;

    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml'});
    var url = DOMURL.createObjectURL(svg);
    console.log(url);
    window.open(url);
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }

    img.src = url;
</script>

如何在所有浏览器中在画布中呈现svg

0 个答案: