image - 从另一个 SVG 中剪出一个

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

要扩展 Tobias Snoad's answer ，使用 Move 命令拿起笔并沿相反方向绘制第二个形状(如 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>

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



这是一个正在运行的演示是 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 路径命令复习

两个变体 :

M 100,150 大写 ( 绝对 ) - 移动到精确坐标 100,150 (x,y)

m 100,150 小写 ( 相对 ) - 将笔 100 和 150 向下移动到你所在的位置

直接命令 :

M x,y - 拿起笔和 M x,y

L x,y - 绘制一个直线 L ine 到点 x,y

H x - 在 x

的右侧画一条线 H

V y - 通过 y

画一条线 V

Z|z - 通过绘制一条直线回到起点(最后 M 个位置)来关闭路径
注意 :Z 是完全可选的 - 它只是返回起点的捷径

曲线命令 :

C cX1,cY1 cX2,cY2 eX,eY - 绘制贝塞尔曲线 C urve 基于两个贝塞尔控制点并在坐标 eX,eY

结束

S cX2,cY2 eX,eY - 基于先前的 S|C 控制点和一个指定的贝塞尔控制点绘制一条 S 体现曲线，并在坐标 eX,eY

处结束

Q cX2,cY2 eX,eY - 基于一个贝塞尔控制点绘制 Q uadratic 曲线并在坐标处结束 eX,eY

T eX,eY - 根据之前的贝塞尔控制点绘制 T 终端二次曲线，并在坐标 eX,eY

处结束

A rX,rY rotation, arc, sweep, eX,eY - 绘制椭圆 rc 用于指定宽度 rX 和高度 rY 的椭圆。用 0|1 为 rotation 和 arc 定义带有度数和方向的 sweep 并在坐标 eX,eY

处结束

TIP: In most instances you can simplify the precision of any automatically generated path points without sacrificing any human discernibility, even when scaled heavily. You can do a regex find ([0-9]*)(\.[0-9]*) and replace with $1 to remove any trailing decimals. You can also format each command on it's own line with find \s*([a-zA-z])\s* and replace with \n$1 .

进一步阅读:

MDN - SVG Tutorial Paths

The SVG path Syntax: An Illustrated Guide

How to place arrow head triangles on SVG lines?

How To Create SVG Arrowheads and Polymarkers

SVG center text in circle