【发布时间】：2022-07-11 07:26:42
【问题描述】：
TL;DR
编辑 SVG > Illustrator > SVG 时，原始元素类会丢失。如何以安全的方式直观地编辑 svg 文件？
简要背景。我对一种基于单个 svg 文件的微型 GIS 的想法很着迷。这是我家乡的交互式热图，其中包含建筑物的颜色编码建筑价值和一些 Google Maps API 中没有的视觉效果。因此，我已经设法：将墨卡托投影中的街道地图从 OpenStreetMap 转换为具有地理参考坐标的 SVG；将建筑多边形与地址、楼层数和建造年份联系起来；实现可接受的缩放和滚动性能（感谢 D3.js）。
我如何想象使用 SVG。 两个有时交替的任务：
- Adobe Illustrator 中的视觉几何校正： 校正地形错误、将多边形转换为复合形状（带庭院的建筑物）等。
- 在 Chrome 控制台中使用 JavaScript 和 CSS 进行数据可视化。 向多边形添加多个类或数据属性，它们负责视觉表示。在样式表中使用不同的选择器和规则，例如，我可以根据建筑风格、高度和建造时间段，围绕一定大小、亮度和色调的多边形创建发光：@987654325 @
这个过程是漫长而反复的。矢量图像需要定期编辑，同时根据收集的数据进行 DOM 操作。
面对现实。 Adobe Illustrator 作为编辑复杂矢量图像的强大工具，将 SVG 文件的 DOM 转换为自己的对象模型。但它并没有完全做到这一点。在我的方法中，一些数据在 Illustrator 中编辑后会永久丢失。
| Data | After editing in Adobe Illustrator |
|---|---|
| Point coordinates | ✅ Saved as in the source SVG |
Grouping of elements (<g>) |
✅ Saved (available in the Layers panel) |
| IDs | ✅ Saved (available as object names in the Layers panel) |
| CSS Classes | ❌ Lost (any class list is replaced by a single class name like st0, st1... or a, b, c...) |
| Arbitrary (data-) attributes | ❌ Lost |
怎么办？
所有实验均在 Adobe Illustrator CC 2019 上完成。最新更新无法安装在我的 macOS Mojave 上。我认为 SVG 引擎中没有任何更新（或者我错了吗？）
- 有没有办法为这类项目设置矢量编辑器？
- 是否（突然）有任何秘密方法可以扩展 Chrome DevTools 功能以在浏览器中进行可视化 SVG 编辑？
当然，在 Illustrator 中每次编辑后总是可以选择后处理。使用 ID，我可以从外部数据数组 (JSON) 中恢复类和/或属性列表。但是我真的不想把这个过程复杂化，这看起来有点奇怪。
最小测试 SVG 代码：
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 200" xml:space="preserve">
<style type="text/css">
.test {fill:red;}
.test.blue {fill:blue;}
</style>
<g>
<rect id="item1" data-test="1" x="190" y="20" class="test" width="120" height="120"/>
<rect id="item2" data-test="1" x="322" y="20" class="test blue" width="120" height="120"/>
</g>
</svg>这是在 Illustrator 中保存的结果（合并/重命名类，删除属性）：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 640 200" style="enable-background:new 0 0 640 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FF0000;}
.st1{fill:#0000FF;}
</style>
<g>
<rect id="item1" x="190" y="20" class="st0" width="120" height="120"/>
<rect id="item2" x="322" y="20" class="st1" width="120" height="120"/>
</g>
</svg>感谢 SO 社区的任何帮助和提示！
【问题讨论】：
-
猜测一下，Inkscape inkscape.org 能做到吗？毕竟 SVG 是 Inkscape 的原生格式。不幸的是，它在 macOS 上的工作并不完全好，但在某种程度上可以工作。
-
即使问题不符合正式规则，我认为将这条规则应用于这个特定问题是不明智的。如果不在这里，应该在哪里问这样的问题？作者展示了大量的研究工作。我投票打开这个问题。
-
@YuriKhristich 非常感谢您对这个问题的支持。 Linkscape 确实是一个很棒的编辑器，但与 Illustrator 相比，它在我的 Mac 上非常慢。我想这就是完全兼容 SVG 的代价。特别是当文件很大时，超过 5 MB
-
你试过this solution吗？它不会解决数据属性的剥离，但希望能保留类名。
-
我认为明智的做法是将您的数据链接到 svg 多边形内的一个点。然后，您可以有一个本地进程，其中输入是基本 SVG 和坐标点列表 + 数据。输出是扩展的 SVG。你可以使用这个函数：stackoverflow.com/a/59718419/1926369
标签： css svg maps adobe-illustrator