1. 首頁
  2. 問答
  3. 有沒有辦法將SVG文件轉換爲HTML5的canvas兼容命令？

有沒有辦法將SVG文件轉換爲HTML5的canvas兼容命令？

2010-05-25 90 views

回答

4

沒有100％的解決方案，但有腳本庫可以將svg的子集轉換爲畫布，例如http://code.google.com/p/canvas-svg/。還有一個實驗性的Path2D API，它可以在畫布上繪製一個svg路徑數據字符串，但不知道它在跨瀏覽器支持的程度如何。

來源

2010-05-26 10:44:50

+0

湖的文檔，沒有解釋答案.. -1 – 2017-01-24 11:46:42

-13

編號SVG是一個（大部分）靜態矢量格式，canvas是一個動態位圖的API。將SVG轉換爲畫布與將SVG轉換爲MathML非常相似：無。

來源

2010-05-26 08:52:57 Ms2ger

+4

矢量格式可以被光柵化。 – 2012-06-20 18:32:00

17

canvg似乎是一個更好的解決方案。這是一個活躍的項目爲2012年1月的

canvas-svg一直沒有更新，因爲它出版於2009年6月

來源

2010-11-26 10:35:31 schellmax

4

我推薦的Java項目SVGToCanvas，如果你只是想靜態生成從一些JavaScript的畫布SVG文件。

來源

2011-02-01 17:45:04 emerix

+0

完美。正是我在找的東西。我知道它必須在那裏，因爲'路徑'數據中的字母代表畫布中可用的相同命令。 – 2011-12-27 14:25:27

0

如果你想在轉換後操作對象，我推薦http://www.kineticjs.com/它也支持SVG路徑數據格式。例如：。

通過svg循環並將矩形，路徑，線條等更改爲包含kineticJS（canvas）對象非常簡單。

來源

2012-07-24 20:31:51

0

對於幾個內部項目有相同的要求。認爲它可以幫助其他人，因此它可以作爲SVG2Canvas實驗。

來源

2012-09-03 19:03:30

3

當前版本的Inkscape支持「另存爲：HTML5畫布」。

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>

來源

2015-12-14 10:27:14 Kamil

相關問題

 相關問題