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

Question

我有几个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文档中找不到任何相关信息 - 感谢您的帮助!

Answer 1

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

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孔

Answer 2

要扩展Tobias Snoad的答案，请使用“ 移动”命令拾起笔并沿相反的方向绘制第二个形状（如Brian Hempel所指出），将从原始路径中删除该部分。这是由于此答案中fill-rule:evenodd说明的（默认）。

这是一个示例，该示例将绘制一个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>

它将在下图中产生第二个框，每个点都用数字标记并用箭头标出，以便您可以看到方向：

这是一个正在运行的演示堆栈片段

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路径命令刷新器

两种变化：

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

直接命令：

• M x,y-拿起笔起来，中号它奥雅纳的地步x,y
• L x,y-画一直大号 INE的地步x,y
• H x- 向右垂直画一条线Hx
• V y- 垂直向下画一条线Vy
• Z|z-通过画一条直线回到起点（最后一个M位置）来封闭路径
  注意：完全Z是可选的 -这只是回到起点的捷径

弯曲命令：

• C cX1,cY1 cX2,cY2 eX,eY-画一条Bezier ç基于urve 两个贝塞尔在坐标控制点和结束eX,eY
• S cX2,cY2 eX,eY- 根据上一个控制点和一个指定的贝塞尔曲线控制点绘制一条S曲线，并在坐标处结束S|CeX,eY
• Q cX2,cY2 eX,eY- 根据一个贝塞尔曲线控制点绘制Q曲线，并在坐标处结束eX,eY
• T eX,eY-画一个牛逼端子二次曲线基于在坐标之前的贝塞尔控制点和终点eX,eY
• A rX,rY rotation, arc, sweep, eX,eY- 为具有指定宽度和高度的椭圆绘制一个椭圆A rc 。定义度和方向为0 | 1的，并以坐标结尾rXrYrotationarcsweepeX,eY

提示：在大多数情况下，即使缩放比例很大，您也可以简化任何自动生成的路径点的精度，而不会牺牲任何人的可分辨性。您可以进行正则表达式查找([0-9]*)(\.[0-9]*)并替换为$1以删除任何尾随的小数。您也可以使用find \s*([a-zA-z])\s*并将其替换为\n$1 自己的每行命令格式。

进一步阅读：

• MDN-SVG教程路径
• SVG path语法：图解指南
• 如何在SVG线上放置箭头三角形？
• 如何创建SVG箭头和多标记
• 圆形的SVG中心文字