Question

我得到了一个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的组自动创建一个新对象？

预先感谢

Answer 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

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

1 个答案: