将 SVG 导入到 paper.js returns 中的路径 null

Question

尝试将 SVG 导入 paper.js canvas 时，元素记录为 "null"。

<script src="path/to/paper-full.min.js"></script>
<canvas id="myCanvas" resize></canvas>
<script src="path/to/script.js" type="text/paperscript" canvas="myCanvas"></script>

内部 script.js：

var svg = '../assets/couch.svg';

var couch = project.importSVG(svg);

console.log(couch); // returns null

我不知道为什么这不起作用，因为这种方法似乎用于解决不同答案的问题...... ->

console.log 的预期输出将是一个对象（请参阅 http://paperjs.org/reference/item/#importsvg-svg，其中显示“Returns： Item — 新创建的 Paper.js 包含转换后的 SVG 内容的项目")

Answer 1

对了，您似乎只能从 importSVG() 回调中导入和使用 SVG 文件。如果你想把它作为一个回调函数之外的对象，它需要是一个DOM元素。

将 SVG 文件的内容“内联”复制并粘贴到您的 html 文件中，使用 fetch API 附加它或从后端回显其内容（这就是我最终的结果做），然后：

svg = document.getElementById('your-selector')

var yourConvertedSVGItem = project.importSVG(svg, function() {
    svg.style.display = 'none' // hide the source image or do something else here
})

console.log(yourConvertedSVGItem)

将 SVG 导入到 paper.js returns 中的路径 null

Import SVG to path in paper.js returns null

javascript

svg

paperjs