使用Javascript扩展和腐蚀SVG形状

编辑：

我终于找到了一种侵蚀和扩展多边形（偏移）的方法，以便使用Clipper库创建新的几何体：

Javascript裁剪器的实时演示：

裁剪器只能处理多边形或多个多边形（例如带孔的多边形），因此要处理SVG格式的其他图形对象，必须将它们转换为直线。至少使用

path.getTotalLength（）

和

path.getPointAtLength（）

（）可以很容易地将路径转换为行

另一种可能性是使用类似的技术（不会创建新几何体）：

---

有没有办法通过Javascript腐蚀和扩展SVG中的形状

我有以下SVG示例：

有三种形状，蓝色是原始的，绿色被腐蚀（变薄）和红色被放大（粗体）。它们是Illustrator制造的

我已经测试过腐蚀和膨胀过滤器，但效果不太好：

在互联网上搜索了几个小时后，我只找到了位图图像腐蚀和膨胀的例子，而没有找到向量形状的例子

我已经成功地在Python中使用Shapely（）扩展和腐蚀SVG多边形，方法是通过Ajax调用PHP脚本发送路径点，从而使system（）调用Python脚本，但这种方法速度较慢，需要服务器完成客户端可以完成的工作

这是我在Python中扩展和腐蚀的代码（正如您看到的，它非常简短）：

还可以找到这篇文献，它试图用数学术语定义扩张和侵蚀：

有一句话是“二值形态学的基本思想是用一个简单的预定义形状探测图像，得出该形状与图像中形状匹配或不匹配的结论。这个简单的“探测”称为结构元素，它本身就是一个二值图像（即空间或网格的子集）。”

我假设这种方法可以用于变形向量形状，但如何

编辑：回复中的一条评论提出了使用过滤器而不是创建新几何体的可能问题：如果有人想向多边形点添加拖动手柄，则拖动手柄可能位于错误的位置。这是可以接受的，因为当时的印象是原始路径数据未被触及，这实际上是过滤器中的情况，但经过进一步测试，证明质量是一个更大的问题。根据和SVG过滤器使用矢量图形对象的像素表示，而不是路径数据本身，这导致

---

EDIT2：可能的解决方法：本页中的一个答案让我使用可变宽度笔划和遮罩来解决这个问题。我做了一些测试并得到了实现。

您实际测试过SVG的本机过滤器吗？这看起来足够近了：

<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <filter id="dilate">
      <feMorphology operator="dilate" in="SourceGraphic" radius="8" />
    </filter>
      <path id="original_path" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"/>
  </defs>
  <use xlink:href="#original_path" fill="#f00" filter="url(#dilate)"></use>    
  <use xlink:href="#original_path" fill="blue"></use>
  <use xlink:href="#original_path" fill="#1CFF00" filter="url(#erode)"></use>    
</svg>

放大

过滤器上有一些剪辑，似乎无法通过增加过滤器区域来解决，但除此之外，它与illustrator渲染非常接近。当然比渲染服务器端要好

---

通过使用不同的笔划宽度与

剪辑路径

或

遮罩

相结合，您可以在某种程度上获得您想要的东西。这里有一些关于它是如何构造的解释，请参见和（向上或向下箭头以查看该示例上的其他幻灯片）

---

不过，它不会给您提供新的几何图形，只是一些看起来像新几何图形的东西。

谢谢您的努力！该过滤器不是很差，但仍不适用于所有情况。如果我们将拖动手柄添加到多边形点，基于过滤器的解决方案如何适合它呢？如果这是您的用例，那么您应该在问题中陈述它。添加了这个。我差点忘了svg也可以用作无交互的普通图像：）谢谢提醒！中的上述过滤解决方案在iPhone4 Safari中似乎不起作用。只有绿色路径可见。根据合同，基于几何体的解决方案在该平台上工作。众所周知，iOS<6不支持SVG过滤器，请不要在您的问题上堆积需求。谢谢！我检查了这些，但是如果多边形控制点必须是可拖动的，那么这种技术是没有帮助的，对吗？就像我写的，你不会从中得到任何新的几何体，所以如果这是你需要的，那么这可能没有帮助。在原始路径上仍然可以有拖动控制柄，这可能会影响其他细化/粗体路径。确定。似乎我在寻找新的几何学。但有一点令人惊讶的是，这样的基本几何函数在谷歌搜索时是找不到的。布尔函数也是如此。数学家们都在哪里？他们都应该对这些功能进行编码！SVG和Javascript很重要！我试图在现实中实现Illustrator中偏移路径的效果。笔划可以用来切割某些东西，还是只用来填充形状？或者“不同笔划宽度与剪辑路径或遮罩组合”是什么意思？偏移路径正（放大）不是大问题，因为我们可以将边框颜色定义为与填充颜色相同。抵消负（侵蚀）是一个更大的问题。可以简单地通过使边框颜色透明来实现吗？

<svg width="612" height="792" viewBox="0 0 612 792" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <filter id="erode">
      <feMorphology operator="erode" in="SourceGraphic" radius="12" />
    </filter>
    <filter id="dilate">
      <feMorphology operator="dilate" in="SourceGraphic" radius="8" />
    </filter>
      <path id="original_path" d="M193.193,85c23.44,0.647,45.161,0.774,62,12c1.596,1.064,12,11.505,12,13
    c0,2.941,8.191,5.669,3,12c-3.088,3.767-6.01-0.758-11-1c-19.56-0.948-33.241,12.296-33,34c0.163,14.698,8.114,24.492,4,41
    c-1.408,5.649-6.571,15.857-10,21c-2.484,3.726-7.898,10.784-12,13c-4.115-11.677,2.686-27.29-6-35c-6.693-5.942-20.021-4.051-26,1
    c-13.573,11.466-11.885,41.492-7,58c-5.8,1.772-18.938,7.685-23,12c-6.752-10.805-15.333-17.333-24-26c-3.307-3.307-9.371-12-15-12
    c-16.772,0-13.963-15.741-13-28c1.283-16.324,1.727-28.24,4-42c1.276-7.72,8-16.411,8-23c0-7.416,15.945-29,23-29
    c4.507,0,17.678-8.701,24-11C164.853,90.76,178.27,88.546,193.193,85"/>
  </defs>
  <use xlink:href="#original_path" fill="#f00" filter="url(#dilate)"></use>    
  <use xlink:href="#original_path" fill="blue"></use>
  <use xlink:href="#original_path" fill="#1CFF00" filter="url(#erode)"></use>    
</svg>