Есть ли способ конвертировать файлы SVG в команды HTML5, совместимые с canvas? - PullRequest
14 голосов
/ 25 мая 2010

Название возобновляет все. : P

Ответы [ 9 ]

18 голосов
/ 26 ноября 2010

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

canvas-svg не обновлялся с момента публикации в июне 2009 года.

5 голосов
/ 14 декабря 2015

Текущая версия 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>
5 голосов
/ 01 февраля 2011

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

5 голосов
/ 26 мая 2010

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

2 голосов
/ 05 октября 2010

попробуйте это:

http://www.professorcloud.com/svg-to-canvas/

0 голосов
/ 03 сентября 2012

Имелось такое же требование для пары внутренних проектов. Думаю, что это может помочь другим, поэтому оно доступно как SVG2Canvas эксперимент.

0 голосов
/ 25 июля 2012

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

Довольно просто перебрать svg и изменить прямоугольники, пути, линии и т. Д. На соответствующие ядру объекты kineticJS (canvas).

0 голосов
/ 14 августа 2010
0 голосов
/ 26 мая 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...