Как в SVG вычислить path исключения?

#javascript #css #html5 #svg #d3js

У меня есть две окружности. Они соответственно задаются тремя path элементами. Первая
окружность, вторая и их пересечение. Можно ли с этой информацией с помощью JS построить
path вычитания окружностей? Если да, то как?
Окружности построены с помощью D3.js.







    

Ответы

Ответ 1

Насколько я вас понял, вам нужно нечто подобное. Я нашёл 2 способа: через правило
fill-rule="evenodd" (подробнее тут) и через элемент mask (подробнее тут). 
Код метода 1 я привёл.Суть в том, что path теперь состоит из 2х путей - первое рисует
изображение, второе используется как заполнитель (вычитатель) и настраивается с помощью
правила заполнения.






Ответ 2

Вариант 1   

Используем Inkscape
 Рисуем две окружности 1и 2 как в примере @ReklatsMasters  








Загружаем файл в Inkscape Оконтуриваем вместе два круга и выбираем пункт меню -"Контур
/разность", сохраняем файл, оптимизируем его.








Вариант 2 

Используем маску.

Маска состоит из двух элементов:
круг меньшего диаметра 2, который вырезает кусок от большого круга 1 и прозрачный
прямоугольник, который обеспечивает видимость невырезанной части большого круга.    


    
      
      
    
  


Ниже пример, того, что получилось в итоге