sch*_*max 18

canvg似乎是一个更好的解决方案.截至2012年1月,这是一个活跃的项目.

canvas-svg自2009年6月发布以来尚未更新.


Kam*_*mil 7

当前版本的Inkscape支持“另存为:HTML5 canvas”。

https://inkscape.org/en/

它产生如下代码:

<!DOCTYPE html>
<html>
<head>
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='200' height='200'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");

// #layer1

// #rect3336
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.lineCap = 'butt';
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgb(30, 144, 255)';
    ctx.rect(0.000000, 88, 64.000000, 64.000000);
    ctx.fill();

// #path4138
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.lineWidth = 1.494353;
    ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1);
    ctx.stroke();

    </script>
</body>
Run Code Online (Sandbox Code Playgroud)


Eri*_*röm 5

没有100%的解决方案,但有一些脚本库可以将svg的子集转换为canvas,例如http://code.google.com/p/canvas-svg/.还有实验性Path2D API可以将svg路径数据字符串绘制到画布上,但不确定它在浏览器中的支持程度.


eme*_*rix 5

如果您只想从SVG文件中静态生成一些Canvas javascript,则建议使用Java项目SVGToCanvas