Попытка передать строку как аргумент функции в SVG

Question

Я пытаюсь динамически создать эту функцию:

svg.path($('#shape23'), 
path.move(333,410)
.smoothC(333,410,333,410)
.smoothC(217.5,415.75,217.5,415.75)
.smoothC(333,500,333,500)
.close(),  {fill: '#CCCCCC'});

... со значением переменной для второго аргумента (от path.move до close ()):

var myPath = 'path.move(333,410)';
myPath += '.smoothC(333,410,333,410)';
myPath += '.smoothC(217.5,415.75,217.5,415.75)';
myPath += '.smoothC(333,500,333,500)';
myPath += '.close()';

 svg.path($('#shape23'), myPath,  {fill: '#CCCCCC'});

... но я получаю ошибку разбора.

Может кто-нибудь помочь, прежде чем я вырву оставшиеся волосы?

Answer 1

Я должен поиграть с этими конструкторами SVG, я использую XML ...

path = Document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
path.setAttribute( 'id', '#shape23' );
path.setAttribute( 'd', 'm33,410 c333,410 217.5,415.75 333,500z' );
path.setAttribute( 'fill', '#CCCCCC' );

Не уверен в метриках пути, но вы можете их исправить.

Answer 2

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

svg.path($('#shape23'), eval(myPath),  {fill: '#CCCCCC'});