Вырежьте один 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

Это нарисует квадрат 10х10 с вырезанным из середины отверстием 6х6

Answer 2

Чтобы расширить на ответ Тобиаса Сноада , взяв перо с помощью команды Move и нарисуйте вторую фигуру в противоположном направлении (как Брайан Хемпель указал ), удалит этот раздел из исходного пути. Это связано с fill-rule:evenodd (по умолчанию), как объяснено в этом ответе .

Вот пример, который нарисует прямоугольник 10х10, а затем перевернет внутри него прямоугольник 6х6:

<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>

В результате появится второе поле на изображении ниже, где каждая точка пронумерована и обозначена стрелкой, чтобы вы могли видеть направление:

Вот демоверсия стека 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 Refresher

Два варианта :

• M 100,150 Прописные буквы ( Абсолют ) - переход к точным координатам 100,150 ( x, y )
• m 100,150 Нижний регистр ( Относительный ) - переместите ручку 100 вниз и 150 вправо от того места, где вы находитесь

Прямые команды :

• M <i>x,y</i> - Поднимите ручку и M переведите ее в точку x,y
• L <i>x,y</i> - Нарисуйте прямую L в точку x,y
• H <i>x</i> - Нарисуйте линию H по горизонтали вправо на x
• V <i>y</i> - Нарисуйте линию V по вертикали вниз на y
• Z|z - Закрывает путь, рисуя прямую линию назад к началу (последнее местоположение M)
  ПРИМЕЧАНИЕ : Z является полностью необязательным - это всего лишь ярлык для возврата к начальной точке

Изогнутые команды :

• C <i>cX1,cY1 cX2,cY2 eX,eY</i> - Нарисуйте кривую Безье C на основе Два элемента управления Безье указывают и заканчивают в координатах eX,eY
• S <i>cX2,cY2 eX,eY</i> - Построить кривую с наклонами S на основе предыдущей контрольной точки S|C и Одна указанная контрольная точка Безье и конец в координатах eX,eY
• Q <i>cX2,cY2 eX,eY</i> - Нарисуйте Q uadratic Curve на основе Одна контрольная точка Безье и конец в координатах eX,eY
• T <i>eX,eY</i> - Построить T конечную квадратичную кривую на основе предыдущей контрольной точки Безье и закончить в координатах eX,eY
• A <i>rX,rY rotation, arc, sweep, eX,eY</i> - Нарисуйте эллиптический A rc для овала с указанной шириной rX и высотой rY. Определите rotation с градусами и направлением с 0 | 1 для arc и sweep и заканчивайте в координатах eX,eY

СОВЕТ : В большинстве случаев вы можете упростить точность любых автоматически сгенерированных точек пути, не жертвуя какой-либо человеческой различимостью, даже когда она сильно масштабирована. Вы можете сделать регулярное выражение найти ([0-9]*)(\.[0-9]*) и заменить его на $1, чтобы удалить все конечные десятичные дроби. Вы также можете отформатировать каждую команду в отдельной строке с помощью find \s*([a-zA-z])\s* и заменить на \n$1 .

Дополнительная литература:

• MDN - учебные пособия по SVG
• Синтаксис SVG path: Иллюстрированное руководство
• Как разместить треугольники со стрелками на линиях SVG?
• Как создать стрелки SVG и Polymarkers
• SVG центр текста в кружке

Answer 3

SVG не поддерживает логические операции на путях. Однако вы можете использовать один путь как обтравочный контур , который даст вам нужный эффект.

Answer 4

Редакторы векторной графики обычно предоставляют это для вас.В Inkscape выберите два пути, а затем какую операцию вы хотите выполнить в меню «Путь».Illustrator также обладает такой же функциональностью.