Нарисовать правильный треугольник вписанный в окружность

Question

Задача: нарисовать окружность радиуса R, а в нее вписать правильный треугольник.

Для треугольника ABC (основание BC параллельно оси x) получаем такие координаты точек

A: (R, 0)

Для R = 50 получается картинка

<svg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0, -2, 100, 100'>
    <path d='M 6.69873 75 H 93.30127 L 50 0 Z' fill='none' stroke='blue'  stroke-width="0.1"/>
    <circle cx='50' cy='50' r='50' stroke='red' fill='none' stroke-width="0.1"/>
</svg>

Теперь для треугольника нужно установить толщину линий в 2w. Соответственно сами вершины нужно сместить, чтобы линии не выходили за пределы окружности. У меня получились такие формулы для координат точек

Если взять 2w = 4, то получим

<svg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0, -2, 100, 100'>
    <path d='M 7.85343 73 H 92.14657 L 50 2.30940 Z' fill='none' stroke='green'  stroke-width="4"/>
    <path d='M 6.69873 75 H 93.30127 L 50 0 Z' fill='none' stroke='blue'  stroke-width="0.1"/>
    <circle cx='50' cy='50' r='50' stroke='red' fill='none' stroke-width="0.1"/>
</svg>

Вопрос: почему треугольник выходит за пределы окружности? Чего я не учитываю?

Answer 1

Вопрос: почему треугольник выходит за пределы окружности? Чего я не учитываю?

Соответственно сами вершины нужно сместить, чтобы линии не выходили за пределы окружности

Видимо всё таки в решение формул, где-то вкралась ошибка, не везде была учтена ширина линий.

Наверное вы знаете, но всё таки...

Ширина линий делится поровну между внутренней частью и наружной относительно осевой.

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

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

И внешняя часть ширины строки будет отсекаться маской. То есть линия будет расти только внутрь.

function changeStroke() {
var sw = document.getElementById("poly"); 
   itr.addEventListener("input",()=>{sw.setAttribute("stroke-width",itr.value)});
    var x = document.getElementById("itr").value;
    
    document.getElementById("infoSW").innerHTML = "stroke-width: " + x +"px";
}

<div>
 <input id="itr" type="range" min="2" value="2" max="50"  oninput="changeStroke()"/>

</div>
<div><text id="infoSW">stroke-width:2px </text></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="204" height="204" viewBox="0 -2 100 102">
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="black" />
<path fill="white" d="M 6.69873 75 H 93.30127 L 50 0 Z"/>
</mask> 

</defs> 

    <path id="poly" mask="url(#msk)" fill="none" stroke-width="2" stroke="blue" d="M 6.69873 75 H 93.30127 L 50 0 Z"  />
       <circle cx="50" cy="50" r="50" stroke="red" fill="none" stroke-width="1"/>
    
</svg>

P.S

У ViewBox не должно быть запятых между атрибутами
Это не привело к ошибке, так как современные браузеры съедают это, но потом, где ни будь в стороннем приложении, будет мучительно трудно искать причину неадекватной работы SVG
Старайтесь избегать одинарных кавычек, только двойные для атрибутов SVG. Просто по опыту знаю, что это тоже мина замедленного действия.

Answer 2

Лажанулся я в вычислениях. Вместо того, чтобы поделить ширину на sin(30°) я делил на cos(30°). А дальше все пошло не так.

Итого правильные формулы для смещенного треугольника при ширине линий 2w

A: (R, 2w)

И треугольник для 2w = 4

<svg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 100 100'>
    <path d='M 10.2 73 H 89.8 L 50 4 Z' stroke-linejoin="miter" fill='#008000' stroke='#00FF00' stroke-width='4'/>
    <path d='M 10.2 73 H 89.8 L 50 4 Z' fill='none' stroke='red' stroke-width='0.1'/>
    <path d='M 6.7 75 H 93.3 L 50 0 Z' fill='none' stroke='blue' stroke-width='0.1' stroke-dasharray="1,1"/>
    <circle cx='50' cy='50' r='50' stroke='red' fill='none' stroke-width='0.1' />
</svg>

БЛОГ НА HUSL

Нарисовать правильный треугольник вписанный в окружность

Ответы (2 шт):