向paperjs SVG添加标题元素(使用node.js)

时间:2019-06-25 14:14:08

标签: node.js svg element paperjs jsdom

我想在node.js应用程序中使用paper.js及其exportSVG函数生成的SVG文件中添加<title>元素(使用 paperjs-jsdom < / em>包)

到目前为止,我的文件如下所示:

<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 包中),试图在DOM中加载<svg>内容,但是我没有能够使其工作。

1 个答案:

答案 0 :(得分:2)

如果您只是在<title>标记后面添加<svg>标记,那么即使不使用JSDOM的一种解决方法也可以是使用RegExp
这是sketch演示解决方案。

// 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>