使用 paper.js importSVG() 时，如何改变它的路径？

Question

使用 Paper.js，我使用以下方法导入了一个 SVG：

var kanji = project.importSVG(url, {
  expandShapes: true,
  onLoad: function(item) {
    console.log("imported SVG!");

  },
  onError: console.log("something went wrong importing")
});

这成功地将 svg 添加到我的 canvas。但是，我想操纵 SVG 的路径。当代码到达 onLoad 范围时，我感到困惑。在这里，我得到了我命名为 item 的 svg，这是一个大而复杂的对象：

initialize {_children: Array(3), _namedChildren: {…}, _matrix: t, _id: 1, _index: 0, …}

随着子数组的内容有更多的子项，还有很多其他选择。我想 access/copy/manipulate 路径的节点，但我什至找不到对象中的路径。我怎样才能做到这一点？从 svg 文件本身获取路径似乎更容易。或者我在这里遗漏了什么？

谢谢！

Answer 1

当您将 SVG 导入 Paper.js 时，会创建一个包装器组来表示根 <svg> 标签。
您可以使用项目 children（仅适用于组）和 parent 属性导航 Paper.js 项目树，就像使用普通 DOM 树一样。

这里是 sketch 演示解决方案。

// This represents the source svg.
const svg = '' +
    '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="267px" height="277px" viewBox="0 0 267 277">' +
    '    <g>' +
    '        <polygon fill="#FFED00" points="180,183 26,183 26,29 181,28 "/>' +
    '        <path fill="#009FE3" d="M243,183c0-34.794-28.206-64-63-64s-63,29.206-63,64s28.206,63,63,63S243,217.794,243,183z"/>' +
    '    </g>' +
    '</svg>';

// We import the svg.
// What we get in return is a wrapper group corresponding to the `<svg>` tag.
const svgGroup = project.importSVG(svg);
// Then we can get our group (`<g>` tag) by accessing the last child of the svg group (the first child is a clip mask corresponding to the `<svg>` `viewBox` attribute).
const group = svgGroup.lastChild;
// Then we can get our path...
const path = group.lastChild;
// ...and do what we want with it.
path.firstSegment.point += 20;

使用 paper.js importSVG() 时，如何改变它的路径？

when using paper.js importSVG(), how to change its path?

javascript

svg

paperjs