4

有没有一种功能或方法可以剪辑视图框之外的路径，而不是仅仅隐藏它？

我正在使用 svg-edit 它有一个视图框，一个画布区域。在画布之外绘制的所有内容都是隐藏的。但是，当编辑器的输出被收集并粘贴到 Inkscape 等图形编辑器中时，整个绘图就会出现。我希望从编辑器的输出中完全剪掉视图框外的绘图。因此，例如，如果我有一个在画布外一半的圆圈，那么编辑器的输出将是半个圆圈，而不是整个圆圈，只是隐藏了一半。

我想改变主题路径本身的几何形状，而不仅仅是将其隐藏起来。

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

4

1 回答 1

4

一种方法是将 aclip-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>

在这里在线查看。

在您的情况下，您可能只希望元素<rect>内部<clipPath>有一个与 viewBox 具有相同尺寸的元素。

于 2013-02-25T19:36:09.313 回答