node.js - paper.js 和 Adobe Illustrator SVG:图层兼容性
问题描述
我正在使用 paper.js(来自 node.js,带有paper-jsdom包)创建 SVG 文件,并且我想让它们尽可能与 Adobe Illustrator 兼容。为了做到这一点,我试图重现[here]中描述的步骤。但是,然后,使用exportSVG函数导出到 SVG,我得到了一些完全不同的东西:
paper.js 和 AI 之间的层兼容性似乎不再起作用。那么,我在这里错过了什么吗?是因为我的 AI 版本(CC 2018)吗?有没有办法绕过这个问题?
解决方案
我不认为SVG 导出与图层模型Paper.js
兼容。
您说这“似乎不再起作用”但是您是否使它与以前版本的/一起使用?如果不是,我猜您对文档中关于共享层概念
的类比感到困惑。
但是这个类比只是因为用户习惯了分层,这使他们能够更好地理解如何工作。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
中,您将不会获得 2 层,而只会获得包含 2 个组的层(就像您使用Paper.js
导出的 SVG 所做的那样)。
如果你勾选“Preserve Illustrator Editing Capabilities”,你会得到一个非常不同的结果:
<?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 文件。
推荐阅读
- html - 如果我在父 div 上使用“转换”,则混合混合模式不起作用
- r - 如何通过合并 R 中不同数据框中具有相同名称的列来创建新数据框?
- python - Keras 功能 API 从带有 LSTM 层的 Keras Sequential API 产生不同的结果
- android - 在 okhttp3 中的请求之间创建一秒延迟
- c# - 如何编写一个程序,将平均成绩计算为双值,并在消息框中显示成绩?
- flutter - 向 FlutterToast 添加前导图标
- html - CKeditor 不允许 html 图标标签
- python - 如何使用 sql python 过滤数据的变量列表?
- python - 如何代表其他用户在 Gerrit 上推送代码审查标签
- python - 如何知道用户何时完成了窗口大小的调整?