从另一个</path>中删除一个SVG <path>

时间：2010-08-24 20:39:57

标签： image vector svg

我有几条SVG路径如下：

M204.21121687607624,196.94037184487675L329.92080751248244,195.46306542867487A130,130,0,0,0,244.46261863233696,77.83995929783192Z
M198.39145828733604,195.04941765207442L235.83285625620988,75.03597952801854A130,130,0,0,0,97.55860203112616,119.9640082076644Z

我现在想要添加另一条路径，但是，不是将其添加到形状中，而是将其从之前的路径中删除。我怎么能做到这一点？

我在SVG文档中找不到任何相关信息 - 感谢您的帮助！

4 个答案:

答案 0 :(得分：6)

您可以使用单一路径执行此操作：

M 0,0 l 0,10 10,0 0,-10 -10,0 z m 2,2 l 6,0 0,6 -6,0 0,-6 z

这将绘制一个10x10的正方形，从中间切出6x6个孔

答案 1 :(得分：4)

要展开Tobias Snoad's answer，请使用移动命令拿起笔并沿相反方向绘制第二个形状 Brian Hempel pointed out ），将从原始路径中删除该部分。这是fill-rule:evenodd所述的this answer（默认）所致。

这是一个示例，它将绘制一个10x10的盒子然后反转其中的6x6盒子：

<svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="0,0,10,10">
  <path d="M 0,0 h 10 v 10 h -10 z
           M 2,2 v  6 h  6 v  -6 z" /> 
</svg>

这将生成下图中的第二个框，每个点都有编号和箭头，以便您可以看到方向：

Path Orientation

这是一个正在运行的演示是Stack Snippets 

svg path.shape {
  fill: green;
  stroke: #1b1b1b;
  stroke-width: .5px;
}
svg path.arrow {
  fill: yellow;
  stroke: black;
  stroke-width: .1px;
}
svg text {
  font-size: .8px;
  font-family: monospace;
  stroke: navy;
  stroke-width: .1px;
  text-anchor: middle;
  alignment-baseline: middle;
}
svg circle {
  r: .5;
  stroke: navy;
  stroke-width: .1px;
  fill: yellow;
}
<svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">

  <defs>
    <marker id='arrow' orient="auto"  
          refX='-.9' refY='1'
          markerWidth='2' markerHeight='2' >
      <!-- triangle pointing right (+x) -->
      <path d='M 0,0 V 2 L 1,1 Z' class="arrow"/>
    </marker>
  </defs>    

  <path d="M 0,0 h 10 v 10 h -10 z
           M 2,2 h  6 v  6 h  -6 z"  
        marker-mid='url(#arrow)' class="shape" />
                             
    <circle cx="0" cy="0" />                  
    <text    x="0"  y="0" > 1</text>    
    <circle cx="10" cy="0" />                  
    <text    x="10"  y="0" > 2</text>  
    <circle cx="10" cy="10" />                  
    <text    x="10"  y="10" > 3</text>  
    <circle cx="0" cy="10" />                  
    <text    x="0"  y="10" > 4</text>  
    <circle cx="2" cy="2" />                  
    <text    x="2"  y="2" > 5</text>  
    <circle cx="8" cy="2" />                  
    <text    x="8"  y="2" > 6</text>  
    <circle cx="8" cy="8" />                  
    <text    x="8"  y="8" > 7</text>  
    <circle cx="2" cy="8" />                  
    <text    x="2"  y="8" > 8</text>  
</svg>

<svg xmlns="http://wwww3org/2000/svg" height="200" viewBox="-2,-2,14,14">
 
  <path d="M 0,0 h 10 v 10 h -10 z
           M 2,2 v  6 h  6 v  -6 z" 
        marker-mid='url(#arrow)' class="shape" /> 
   
    <circle cx="0" cy="0" />                  
    <text    x="0"  y="0" > 1</text>    
    <circle cx="10" cy="0" />                  
    <text    x="10"  y="0" > 2</text>  
    <circle cx="10" cy="10" />                  
    <text    x="10"  y="10" > 3</text>  
    <circle cx="0" cy="10" />                  
    <text    x="0"  y="10" > 4</text>  
    <circle cx="2" cy="2" />                  
    <text    x="2"  y="2" > 5</text>  
    <circle cx="2" cy="8" />                  
    <text    x="2"  y="8" > 6</text>      
    <circle cx="8" cy="8" />                  
    <text    x="8"  y="8" > 7</text>  
    <circle cx="8" cy="2" />                  
    <text    x="8"  y="2" > 8</text>  
</svg>

SVG Path Command Refresher

两种变体：

  • M 100,150大写（绝对） - 移至精确坐标 100,150（ x，y ）
  • m 100,150小写（相对） - 向下移动笔100，向右移动150

直接命令：

  • M x,y - 选择笔并 M 将其设为 x,y
  • L x,y - 直接 L 指向 x,y
  • H x - 通过 x
    • 向右侧或右侧画一条线 H
  • V y - 通过 y
    • 在ertically下划一条 V
  • Z|z - 通过画一条直线回到起点（最后M个位置）来关闭路径 注意：Z 完全可选 - 这只是回到起点的快捷方式

曲线命令：

  • C cX1,cY1 cX2,cY2 eX,eY - 根据两个 bezier控制点绘制一个Bezier C urve，并在坐标 eX,eY
  • S cX2,cY2 eX,eY - 根据之前的S|C控制点和 One 指定的bezier控制点绘制 S implifed曲线，并在坐标处结束 eX,eY
  • Q cX2,cY2 eX,eY - 根据 One bezier控制点绘制 Q uadratic曲线，并以坐标 eX,eY
  • T eX,eY - 根据前一个贝塞尔控制点绘制 T 发送二次曲线，并以坐标 eX,eY
    • 结束
  • A rX,rY rotation, arc, sweep, eX,eY - 为具有指定宽度 rX 且高度 rY的椭圆绘制椭圆 A rc 。为 rotation 和 arc 定义带有度数和方向的 sweep 0 | 1并结束在坐标 eX,eY
  

提示：在大多数情况下，您可以简化任何自动生成的路径点的精度，而不会牺牲任何人类可辨别性，即使在大量缩放时也是如此。您可以使用正则表达式find ([0-9]*)(\.[0-9]*) and replace with $1删除任何尾随小数。您还可以使用find \s*([a-zA-z])\s* and replace with \n$1 在其自己的行上格式化每个命令。

进一步阅读：

答案 2 :(得分：1)

SVG不支持路径上的布尔操作。但是，您可以使用一个路径作为clipping path，这将为您提供所需的效果。

答案 3 :(得分：0)

矢量图形编辑器通常会为您提供此功能。在Inkscape中，选择两个路径，然后选择要在“路径”菜单上执行的操作。 Illustrator也具有相同的功能。

相关问题
最新问题