1. Trang chủ
  2. Câu hỏi và trả lời
  3. Có 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?

Có 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?

2010-05-25 37 views

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.

Nguồn

2010-05-26 10:44:50

+0

hồ tài liệu, không giải thích câu trả lời .. -1 –

-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.

Nguồn

2010-05-26 08:52:57 Ms2ger

+4

định dạng Vector có thể được rasterized. –

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.

Nguồn

2010-11-26 10:35:31 schellmax

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.

Nguồn

2011-02-01 17:45:04 emerix

+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

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.

Nguồn

2012-09-03 19:03:30

3

Phiên bản hiện tại của Inkscape hỗ trợ "lưu dưới dạng: canvas HTML5".

https://inkscape.org/en/

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>

Nguồn

2015-12-14 10:27:14 Kamil

Các vấn đề liên quan

 Các vấn đề liên quan