Question

我有一个SVG文件，它代表使用不同路径的地图。

https://imgur.com/a/YyTyz

这些路径代表不同的领域;我需要将这些路径创建的外部笔划加粗，如此图所示（请注意，单个文件中有2个SVG）。

https://imgur.com/a/0fepe

是否有可能以一种简单的方式实现这一目标？

感谢您的建议

Answer 1

假设地图的每个区域都是他们自己的路径 - 并且您还没有在外面有路径，那么最简单的解决方案是：

复制地图
把它放在后面
为地图路径提供更粗的笔划

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

＆＃13;

<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>

＆＃13;

如果我们拿这些元素的副本并给它一个更粗的笔画，我们得到：

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

SVG - 创建不同合并路径的外部笔划

1 个答案: