5

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

<svg width="600" height="350">
  <g class="venn-area venn-circle" data-venn-sets="40050623">
    <path d="
M 262.7448645313231 175 
m -160 0 
a 160 160 0 1 0 320 0 
a 160 160 0 1 0 -320 0" style="fill-opacity: 0.25; fill: green; stroke-width: 3; stroke-opacity: 1; stroke: black;"></path>
    <text class="label" text-anchor="middle" dy=".35em" x="238" y="174" style="fill: rgb(214, 39, 40);"><tspan x="238" y="174" dy="0.35em">1</tspan></text></g>
  <g class="venn-area venn-circle" data-venn-sets="40050618">
    <path d="
M 436.233529756959 175.00000000000009 
m -61.02160571171791 0 
a 61.02160571171791 61.02160571171791 0 1 0 122.04321142343582 0 
a 61.02160571171791 61.02160571171791 0 1 0 -122.04321142343582 0" style="fill-opacity: 0.25; fill: green; stroke-width: 3; stroke-opacity: 1; stroke: black;"></path>
    <text class="label" text-anchor="middle" dy=".35em" x="460" y="175" style="fill: rgb(148, 103, 189);"><tspan x="460" y="175" dy="0.35em">2</tspan></text></g>
  <g class="venn-area venn-intersection" data-venn-sets="40050623_40050618">
    <path d="
M 412.537591711912 231.23289858971944 
A 61.02160571171791 61.02160571171791 0 0 1 412.537591711912 118.76710141028073 
A 160 160 0 0 1 412.537591711912 231.23289858971944" style="fill-opacity: 0; stroke-width: 3; stroke-opacity: 1; stroke: black;"></path>
    <text class="label" text-anchor="middle" dy=".35em" x="398" y="175" style="fill: rgb(68, 68, 68);">3<tspan x="398" y="175" dy="0.35em"></tspan></text></g></svg>

2
  • не совсем понял, вам нужно удалить область пересечения? 18 сен 2016 в 21:26
  • Мне нужно получить область 1 без области 3, что бы можно было независимо менять ее цвет, вешать события и т.п. И важно это сделать с помощью js. 19 сен 2016 в 8:24

2 ответа 2

4

Вариант 1

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

<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g transform="translate(10 10)">   
  <circle  r="100" cx="100" cy="100" stroke="black" stroke-width="1" fill="none"  />
   <circle r="50" cx="200" cy="100" fill="none" stroke="black" stroke-width="1"/>
 </g>
 	 </svg>

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

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="300" height="300" id="svg2" version="1.1">
   <g transform="translate(10 10)" >
    <path fill="yellowgreen" stroke="black" d="M110 10A100 100 0 0 0 10 110 100 100 0 0 0 110 210 100 100 0 0 0 197.5 158.4 50 50 0 0 1 160 110 50 50 0 0 1 197.4 61.6 100 100 0 0 0 110 10z" transform="translate(-10,-10)" />
  </g>
</svg>

Вариант 2

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

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

<defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white" />
      <circle r="50" cx="200" cy="100" fill="black" stroke="white"/>
    </mask>
  </defs>

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

<svg baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white" />
      <circle r="50" cx="200" cy="100" fill="black" stroke="white"/>
    </mask>
  </defs>

   <g mask="url(#hole)">
  <circle id="donut" r="100" cx="100" cy="100" stroke="black" stroke-width="1" fill="yellowgreen"  />
   <circle r="48" cx="198" cy="100" fill="none" stroke="black" stroke-width="1.5"  /> 
   </g>
</svg>

1
  • Спасибо за ответ! Основная идея была в том что бы делать это через JS динамически. Я понял, что по шаблону без доступа к объектам, построившим это, что либо модифицировать не получится. 7 авг 2017 в 11:19
3

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

<svg width="600" height="350">
  <g class="venn-area venn-circle" data-venn-sets="40050623">
    <path d="
M 262.7448645313231 175 
m -160 0 
a 160 160 0 1 0 320 0 
a 160 160 0 1 0 -320 0
             
M 412.537591711912 231.23289858971944 
A 61.02160571171791 61.02160571171791 0 0 1 412.537591711912 118.76710141028073 
A 160 160 0 0 1 412.537591711912 231.23289858971944" style="fill-opacity: 0.25; fill: green; stroke-width: 3; stroke-opacity: 1; stroke: black;" fill-rule="evenodd" ></path>
    <text class="label" text-anchor="middle" dy=".35em" x="238" y="174" style="fill: rgb(214, 39, 40);"><tspan x="238" y="174" dy="0.35em">1</tspan></text>
   
    
    <path d="
M 436.233529756959 175.00000000000009 
m -61.02160571171791 0 
a 61.02160571171791 61.02160571171791 0 1 0 122.04321142343582 0 
a 61.02160571171791 61.02160571171791 0 1 0 -122.04321142343582 0
M 412.537591711912 231.23289858971944 
A 61.02160571171791 61.02160571171791 0 0 1 412.537591711912 118.76710141028073 
A 160 160 0 0 1 412.537591711912 231.23289858971944" style="fill-opacity: 0.25; fill: green; stroke-width: 3; stroke-opacity: 1; stroke: black;"></path>
    <text class="label" text-anchor="middle" dy=".35em" x="460" y="175" style="fill: rgb(148, 103, 189);"><tspan x="460" y="175" dy="0.35em">2</tspan></text>
   
        <!-- <path d="
M 412.537591711912 231.23289858971944 
A 61.02160571171791 61.02160571171791 0 0 1 412.537591711912 118.76710141028073 
A 160 160 0 0 1 412.537591711912 231.23289858971944" style="fill-opacity: 1; stroke-width: 3; stroke-opacity: 1; stroke: black;" ></path> -->
    <text class="label" text-anchor="middle" dy=".35em" x="398" y="175" style="fill: rgb(68, 68, 68);">3<tspan x="398" y="175" dy="0.35em"></tspan></text>
  
  </g></svg>

1
  • Спасибо за ответ! Не знал о подобных возможностях, но это похоже не совсем то что мне нужно. Если переформулировать вопрос, то мне нужно оставить область 1 и убрать области 2 и 3. Я пытался сделать это с помощью свойств fill-rule и mask, но у меня не получилось оставить границу между 1 и 3 19 сен 2016 в 8:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.