SVG：使用轮廓边框对路径进行分组（并根据现有路径创建新路径）答案

【问题标题】：SVG: grouping paths with outline border (and creating a new path based on the existing ones)SVG：使用轮廓边框对路径进行分组（并根据现有路径创建新路径）
【发布时间】：2018-10-06 16:11:13
【问题描述】：

我有一个 SVG 文件，其中包含四个路径（四个正方形）：

<html>
<body>

<svg height="1000" width="1000">
    <path fill="blue" id="square1" d="M0 0 L0 100 L100 100 L100 0 Z" />
    <path fill="green" id="square2" d="M100 0 L100 100 L200 100 L200 0 Z" />

    <path fill="yellow" id="square3" d="M0 100 L0 200 L100 200 L100 100 Z" />
    <path fill="red" id="square4" d="M100 100 L200 100 L200 200 L100 200 Z" />
</svg>

</html>
</body>

four squares

我想在视觉上将这四个方块分成两组（蓝色/绿色和黄色/红色）。

应该在两个蓝色方块和两个绿色方块周围画一个框架。

如何在这两组正方形周围添加轮廓线？

是否也可以为每个具有自己 ID 的组自动创建一个新对象？

提前致谢

【问题讨论】：

标签： svg path outline

【解决方案1】：

您可以在较大的正方形上使用较小的正方形来制作边框，例如：

<path fill="black" id="square1-bg" d="M0 0 L0 100 L100 100 L100 0 Z" />
<path fill="blue" id="square1" d="M3 3 L3 97 L97 97 L97 3 Z" />

至于模板化 JS 可能是最好的选择： https://jsfiddle.net/Lyzpe35m/10

【讨论】：

实际情况有点复杂：大约有 400 个多边形，我想将它们分成四组。所以我正在寻找一种方法来对多边形进行分组并为每个组添加一条外边界线。