Блог

Главная - Вопросы по программированию - Почему эти простые пути SVG имеют разные радиусы?

Почему эти простые пути SVG имеют разные радиусы?

#html #web #svg

Вопрос:

Почему эти два SVG-пути имеют два разных радиуса, хотя все значения радиуса 73 одинаковы ? Запустите фрагмент кода, чтобы понять, что я имею в виду

 .overflow-visible {
  overflow: visible;
} 
 <div style="padding: 100px">
  <svg width="145" height="1" class="overflow-visible">
    <path d="
             M 0 0 
             A 73 73 0 0 1 140 0
             " stroke="black" fill="transparent" stroke-width="3"></path>
  </svg>

  <svg width="83" height="1" class="overflow-visible">
    <path d="
             M 0 0 
             A 73 73 0 0 1 79 0
             " stroke="black" fill="transparent" stroke-width="3"></path>
  </svg>
</div>

Комментарии:

1. Вы пробовали отображать одно поверх другого? Они довольно похожи, если вы это сделаете. Я подозреваю, что это одна из тех проблем с иллюзиями.

Ответ №1:

Если вы перевернете флаги большого/развертки, чтобы нарисовать остальные круги, вы увидите, что обе дуги являются частями одного и того же круга (радиусом 73).:

 <svg width="360" height="200">
    <g stroke="black" stroke-width="3" fill="none">
        <path d="M 20 60  a73 73 0  0 1  140 0"/>
        <path d="M220 60  a73 73 0  0 1   79 0"/>
    </g>
    <g id="the-missing-parts" stroke="lightskyblue" stroke-width="2" stroke-dasharray="4" fill="none">
        <path d="M 20 60  a73 73 0  1 0  140 0"/>
        <path d="M220 60  a73 73 0  1 0   79 0"/>
    </g>
</svg>
Метки: