SVG - 创建不同合并路径的外部描边

Question

我有一个 SVG 文件，它表示使用不同路径的 map 。

/image/PB5zo.jpg

这些路径代表不同的区域；我需要将这些路径创建的外部笔画加粗，如图所示(请注意，单个文件中有 2 个 SVG)。

/image/pCoAp.jpg

是否可以通过简单的方式实现这一点？

谢谢建议

Answer 1

假设 map 的每个区域都有自己的路径 - 并且您还没有围绕外部的路径，那么最简单的解决方案是:

1. 复制 map
2. 放在后面
3. 给 map 路径加粗描边

例如，让我们从以下简化示例开始。

<svg width="400" height="200">
  <rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
  <rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
  <rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
  <rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>

如果我们复制这些元素并给它加粗，我们会得到:

<svg width="400" height="200">
  <g fill="linen" stroke="black" stroke-width="5">
    <rect x="50" y="50" width="200" height="50"/>
    <rect x="250" y="50" width="100" height="50"/>
    <rect x="50" y="100" width="150" height="50"/>
    <rect x="200" y="100" width="150" height="50"/>
  </g>
  <rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
  <rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
  <rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
  <rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>

为了使文件尽可能小，我们可以重复使用 map 的两个副本的路径:

<svg width="400" height="200">
  <defs>
    <g id="map">
      <rect x="50" y="50" width="200" height="50"/>
      <rect x="250" y="50" width="100" height="50"/>
      <rect x="50" y="100" width="150" height="50"/>
      <rect x="200" y="100" width="150" height="50"/>
    </g>
  </defs>

  <use xlink:href="#map" fill="linen" stroke="black" stroke-width="5"/>
  <use xlink:href="#map" fill="linen" stroke="black"/>
</svg>

这不一定是最优雅的解决方案，因为所有 map 元素都会绘制两次。但这是最简单的解决方案。