Как нарисовать дугу с помощью svg.js

Question

Использование svg.js Я хотел бы обратить путь с дуги:

M75,0 L75,118.85 A30,30 0 0 0 640,660.15 L568.5690264688633,781.8607965826662 

Я пробовал все (пробелы, запятые, ...), но не успех. Тем не менее получать сообщение об ошибке:

Error: Problem parsing d="M 50 0 L 50 108.8499984741211 A 660.3822631835938 199.75233459472656 L 631.133056640625 133.80345153808594"

Большое спасибо заранее.

Answer 1

Лично у меня нет опыта работы с svg.js, но у меня есть с Raphaël.js. Raphaël - небольшая библиотека JavaScript, которая должна упростить вашу работу с векторной графикой в ​​Интернете. Он имеет очень хорошую документацию с примерами.

Работа с пути легко в Raphaël.js и вот как вы это делаете:

var c = paper.path("M10 10L90 90"); 
// draw a diagonal line: 
// move to 10,10, line to 90,90 

Вы можете написать путь двумя способами:

1. Координаты разделенных пробелом

   "M10 10L90 90"

2. Координаты разделены с запятой

   "M10,10L90,90"

А вот небольшой пример пути:

r = Raphael("holder", 100, 100); 
r.path("M10,10L90,90"); 

Он просто рисует линию.

Answer 2

Существует плагин https://github.com/otm/svg.path.js, который обеспечивает простой интерфейс для создания путей. С помощью плагина вы можете, например, написать записи:

var draw = SVG('drawing').size(800, 800); 
var path draw.path().M(10, 10).L(20, 20) 

Вот некоторые примеры для плагина: http://otm.github.io/svg.path.js/

Существует также новая функция svg.js называется путь массива:

https://github.com/wout/svg.js#svgpatharray