如何裁剪viewBox之外的内容？

Question

是否有一个函数或方法可以裁剪位于viewbox之外的路径，而不只是隐藏它？

我使用的是svg-edit，它有一个viewbox，一个画布区域。画布外部绘制的所有内容都会被隐藏。但是，当收集编辑器的输出并将其粘贴到图形编辑器(如Inkscape )中时，将显示整个绘图。我希望在viewbox之外的绘图完全从编辑器的输出中裁剪。例如，如果我有一个在画布外面的圆，那么编辑器的输出将是半个圆，而不是整个圆，只是隐藏了其中的一半。

我想改变对象路径本身的几何形状，而不仅仅是隐藏它。

我正在修改svg-edit：http://code.google.com/p/svg-edit/

Answer 1

一种方法是将clip-path应用于根svg元素。

如果需要，它可以是一个简单的矩形区域，也可以是另一个更复杂的形状，如下例所示：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"     
     viewBox="-100 -100 300 300"
     clip-path="url(#clip)">
  <defs>
    <clipPath id="clip">
      <rect width="100" height="100" rx="10"/>
      <path d="M40 99l10 11 10 -11z"/> 
    </clipPath>
  </defs>

  <rect id="background" width="120" height="120" fill="slateblue"/>
  <image xlink:href="images/man.png" width="100" height="110" 
         preserveAspectRatio="xMidYMax meet"/>
</svg>

在线查看here。

在您的例子中，您可能只需要在<clipPath>元素中有一个与viewBox具有相同维度的<rect>。