Бумага JS только экспортирующая <g></g> элемент - PullRequest
Новая
       28

Бумага JS только экспортирующая <g></g> элемент

0 голосов
/ 04 мая 2018

Итак, я создаю объект пути paperjs и помещаю его в группу: 

let path = new paper.Path.Rectangle(originpoint, deviceWidth, deviceHeight);
let ret = new paper.Group();
ret.addChild(path);

И затем я экспортирую ret в SVG следующим образом: 

let svg = ret.exportSVG({
            asString:true
        });

Но результат этого будет только как: 

<g xmlns="http://www.w3.org/2000/svg" fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,85000v-85000h135000v85000z"/></g>

Как вы можете заметить, здесь нет элемента <svg>. Как я могу получить стандартный заголовок SVG без необходимости вручную склеивать его в код. Я явно что-то упускаю, потому что проект, над которым я работаю, генерирует SVG-файлы, отображаемые на холсте с элементами <svg> со следующим заголовком: 

<svg width="135mm" height="85mm" viewBox="0 0 135000 85000" xmlns="http://www.w3.org/2000/svg">

Я уверен, что мне не хватает какой-то детали того, как работает paper.js, похоже, что paper.js имеет определенные объекты, которые он помещает в контейнер svg. Кто-нибудь знает, что это ? или что я могу делать не так ....

Спасибо!

1 Ответ

0 голосов
/ 04 мая 2018

Я не пользователь paper.js или что-то в этом роде, а просто играю с библиотекой. Я понял, что exportSVG унаследован от бумажного прототипа, поэтому, если вы вызываете его из текущего проекта paper.project, то, похоже, он работает как задумано : 

paper.setup(new paper.Size(300, 200));
let path = new paper.Path.Rectangle([0,0], 100, 100);
let ret = new paper.Group();
ret.addChild(path);
let svg = paper.project.exportSVG({
            asString:true
        });
        console.log(svg);

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g><path d="M0,100v-100h100v100z"/></g></g></svg>

FIDDLE: https://jsfiddle.net/ibowankenobi/juem7f80/1/

Прокрутите вниз, чтобы увидеть фрагмент.

...