paper.js &：层兼容

Question

我正在使用paper.js创建SVG文件(来自node.js，带有纸质jsdom包)，我想让它们尽可能地与兼容。为了做到这一点，我试图重新介绍所描述的[这里]步骤。但是，当使用http://paperjs.org/reference/project/#exportsvg函数导出到SVG时，我得到了完全不同的东西：

​

​

paper.js和AI之间的层兼容性似乎不再有效。我是不是漏掉了什么？是因为我的人工智能版本(CC 2018)吗？有没有办法绕过这个问题？

Answer 1

我不认为Paper.js SVG导出与Illustrator层模型兼容。

您说这“似乎不再起作用了”，但您是否使其适用于Paper.js/AI的早期版本？

如果不是，我猜您对Paper.js文档中关于共享层概念的类推感到困惑。

但是，这样的类比只是因为用户习惯了AI层，这使他们能够更好地理解Paper.js的工作方式。

因此，我很想知道AI是如何在SVG导出之后恢复其层的，看看在您的情况下是否存在可能的解决办法。

当您将AI项目导出为SVG时，您可以选择“保留Illustrator编辑功能”。

如果没有，则导出的SVG如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1137px" height="937px" viewBox="0 0 1137 937"
     enable-background="new 0 0 1137 937" xml:space="preserve">
<g id="Calque_1_1_">
    <circle fill="#FF0000" cx="380" cy="238" r="60"/>
</g>
<g id="Calque_2">
    <circle fill="#0000FF" cx="569" cy="468" r="60"/>
</g>
</svg>

但是，如果您尝试将这个SVG加载回AI中，您将不会得到两个层，而只有一个层包含两个组(就像Paper.js导出的SVG一样)。

如果您检查“保存Illustrator编辑功能”，您将得到一个非常不同的结果：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
    ]>
<svg version="1.0" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
     xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1137px"
     height="937px"
     viewBox="0 0 1137 937" enable-background="new 0 0 1137 937"
     xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1"
                   height="1">
        <i:pgfRef xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g id="Calque_1">
            <circle fill="#FF0000" cx="380" cy="238" r="60"/>
        </g>
        <g id="Calque_2">
            <circle fill="#0000FF" cx="569" cy="468" r="60"/>
        </g>
    </g>
</switch>
    <i:pgf id="adobe_illustrator_pgf">
    <![CDATA[
    ...(huge data skipped)
    ]]>
</i:pgf>
</svg>

这一次，如果您将其加载回AI中，您将得到您的层，就像预期的那样。

差异存在于AI添加到SVG的所有元数据中，以便加载它，最重要的是加载<i:pgf id="adobe_illustrator_pgf">元素。

有一个线程讨论了Inskape上下文中同样的问题，这一关键数据似乎是一种只有AI才能读写的二进制数据。

最后，不幸的是，我不认为您或Paper.js可以创建一个映射到AI内部层模型的SVG文件。