Добавление элемента title в paperjs SVG (с помощью node.js) - PullRequest
Новая
       53

Добавление элемента title в paperjs SVG (с помощью node.js)

0 голосов
/ 25 июня 2019

Я хотел бы добавить элемент <title> в файл SVG, созданный с помощью paper.js и его функции exportSVG , в файле node.js.приложение (с использованием пакета paperjs-jsdom )

Пока мои файлы выглядят так: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
width="642" height="377" viewBox="0,0,642,377">
<g> 
...
</g></svg>

И мне бы хотелось, чтобы это выглядело так: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
width="642" height="377" viewBox="0,0,642,377">
<title>toto</title>
<g> 
...
</g></svg>

Я изучил jsdom (который должен быть включен в пакет paperjs-jsdom ), пытаясь загрузить содержимое <svg> в DOM, но яне смог заставить его работать.

1 Ответ

2 голосов
/ 26 июня 2019

Если ваша проблема заключается в добавлении тега <title> после тега <svg>, обходным решением, даже не используя JSDOM, может быть использование RegExp .
Вот эскиз , демонстрирующий решение. 

// Draw a circle.
new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
})

// Export Paper.js project as SVG string.
var svg = project.exportSVG({asString:true});

// Add title after <svg> tag.
svg = svg.replace(/(^<svg[^>]+>)/, '$1<title>My Title</title>');

// Show result in console.
console.log(svg);

Результат: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1151" height="937" viewBox="0,0,1151,937">
    <title>My Title</title>
    <g fill="#ffa500" 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="M525.5,468.5c0,-27.61424 22.38576,-50 50,-50c27.61424,0 50,22.38576 50,50c0,27.61424 -22.38576,50 -50,50c-27.61424,0 -50,-22.38576 -50,-50z"/>
    </g>
</svg>
...