Библиотека для создания SVG Path с Javascript? - PullRequest
Новая
       2

Библиотека для создания SVG Path с Javascript?

3 голосов
/ 14 декабря 2010

Я использую Raphaël для своих нужд рендеринга SVG.Но я нахожу синтаксис Path немного низкоуровневым.

Кто-нибудь знает хорошую обертку / библиотеку для Javascript, которая допускает что-то вроде этого: 

var pathStr = move (10, 10).draw (5, 5)
var path = paper.path(pathStr)

Ответы [ 2 ]

6 голосов
/ 05 августа 2011

Я настоятельно рекомендую d3.js .

Создание пути, представляющего шестиугольник и перемещение его на 10 пикселей в каждом направлении, очень просто: 

var svg = d3.select('body')
    .append('svg:svg')
    .attr('width', 1000)
    .attr('height', 1000);

svg.append('svg:path')
    .attr('d', 'M' + [
        [850, 75], [958, 137.5], [958, 262.5], 
        [850, 325], [742, 262.6], [742, 137.5]
    ].join('L') + 'Z')
    .attr('transform', 'translate(10, 10)');

Он использует селекторы, которые тесно связаны с селекторами, найденными в jQuery.

Цитирую автора:

D3 не предоставляет нового графического представления - в отличие от Processing, Raphaël или Protovis, нет нового словаря оценок для изучения. Вместо этого вы опираетесь непосредственно на стандарты, такие как CSS3, HTML5 и SVG.

4 голосов
/ 15 декабря 2010

Возможно, он не завершен на 100%, но это похоже на то, что вы ищете:

https://github.com/DmitryBaranovskiy/raphael/blob/cuttingedge/plugins/raphael.path.methods.js

...