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 you have read our privacy policy.

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