使用 paper.js importSVG() 时，如何更改其路径？

Question

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

\n\n

var kanji = project.importSVG(url, {\n  expandShapes: true,\n  onLoad: function(item) {\n    console.log("imported SVG!");\n\n  },\n  onError: console.log("something went wrong importing")\n});\n

\n\n

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

\n\n

initialize\xc2\xa0{_children: Array(3), _namedChildren: {\xe2\x80\xa6}, _matrix: t, _id: 1, _index: 0,\xc2\xa0\xe2\x80\xa6}\n

\n\n

由于子数组的内容有更多的子元素，因此有很多其他选项。\n我想访问/复制/操作路径的节点，但我什至无法在对象中找到路径。我该怎么做？\n从 svg 文件本身获取路径似乎更容易。或者我在这里遗漏了什么？

\n\n

谢谢！

\n

Answer 1

当您将 SVG 导入 时Paper.js，会创建一个代表根<svg>标签的包装组。您可以像使用公共树一样使用项目（仅适用于组）来
导航项目树，并且Paper.jsDOMchildrenparent项目树。

这是演示解决方案的草图。

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