1. дома
  2. Вопрос и ответ
  3. Есть ли способ конвертировать SVG-файлы в HTML5-совместимые команды?

Есть ли способ конвертировать SVG-файлы в HTML5-совместимые команды?

2010-05-25 4 views

ответ

4

Нет решения 100%, но есть библиотеки сценариев, которые могут преобразовывать подмножество svg в холст, например http://code.google.com/p/canvas-svg/. Существует также экспериментальный API Path2D, который может нарисовать строку данных пути SVG на холсте, но не уверен, насколько хорошо он поддерживается в браузерах.

источник

2010-05-26 10:44:50

+0

Озеро документации, не объяснено ответ. -1 –

-13

№ SVG - это (в основном) статический векторный формат, а холст - это API для динамического растрового изображения. Поворот SVG в холст имеет такое же значение, как превращение SVG в MathML: none.

источник

2010-05-26 08:52:57 Ms2ger

+4

векторные форматы могут быть растеризации. –

17

canvg кажется лучшим решением. Это активный проект по состоянию на январь 2012 года

canvas-svg не был обновлен, так как он был опубликован в июне 2009 года

источник

2010-11-26 10:35:31 schellmax

4

Я рекомендую проект Java SVGToCanvas, если вы просто хотите, чтобы статически генерировать некоторые Canvas JavaScript из SVG-файл.

источник

2011-02-01 17:45:04 emerix

+0

Отлично. Только то, что я искал. Я знал, что это должно быть там, потому что буквы в «дорожной» стойке данных предназначены для тех же команд, доступных в холсте. –

0

Если вы хотите манипулировать объектами после преобразования, я рекомендую http://www.kineticjs.com/, он также поддерживает формат данных SVG. Например: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/.

Очень легко прокрутить 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

Смежные вопросы

 Смежные вопросы