11
Tiêu đề tiếp tục mọi thứ. : PCó cách nào để chuyển đổi các tệp SVG sang các lệnh tương thích với canvas của HTML5 không?
A
Trả lời
4
Không có giải pháp 100%, nhưng có các thư viện tập lệnh có thể chuyển đổi tập con của svg thành canvas, ví dụ: http://code.google.com/p/canvas-svg/. Ngoài ra còn có API thử nghiệm Path2D có thể vẽ chuỗi dữ liệu đường dẫn svg lên canvas, không chắc chắn nó được hỗ trợ tốt như thế nào trên các trình duyệt.
-13
No. SVG là định dạng vector tĩnh (chủ yếu) và canvas là một API cho bitmap động. Việc chuyển SVG thành canvas sẽ có ý nghĩa nhiều khi chuyển SVG thành MathML: none.
+4
định dạng Vector có thể được rasterized. –
0
Đây là nỗ lực của tôi!
http://appsynergy.net/projects/converting-svg-path-to-html5-canvas/
1
thử điều này:
17
canvg có vẻ là một giải pháp tốt hơn. Đây là một dự án tích cực như tháng Giêng năm 2012.
canvas-svg chưa được cập nhật kể từ khi nó được xuất bản vào tháng Sáu năm 2009.
4
Tôi khuyên bạn nên dự án Java SVGToCanvas nếu bạn chỉ muốn tĩnh tạo ra một số Canvas javascript từ Tệp SVG.
+0
Hoàn hảo. Chỉ cần những gì tôi đang tìm kiếm. Tôi biết nó phải được ra khỏi đó kể từ khi các chữ cái trong dữ liệu 'đường dẫn' đứng cho các lệnh tương tự có sẵn trong vải. –
0
Nếu bạn muốn thao tác các đối tượng sau khi chuyển đổi, tôi khuyên bạn nên http://www.kineticjs.com/ nó cũng hỗ trợ định dạng dữ liệu đường dẫn SVG. Ví dụ: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/.
Thật dễ dàng để lặp qua svg và thay đổi hình chữ nhật, đường dẫn, đường kẻ, v.v. thành đối tượng kineticJS (canvas) coresponding.
0
Có yêu cầu tương tự cho một vài dự án nội bộ. Nghĩ rằng nó có thể giúp người khác, vì vậy nó có sẵn như là một thử nghiệm SVG2Canvas.
3
Phiên bản hiện tại của Inkscape hỗ trợ "lưu dưới dạng: canvas HTML5".
Nó tạo mã như thế này:
<!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>
hồ tài liệu, không giải thích câu trả lời .. -1 –