Эллиптическая дуга SVG

ProgramBox

Эллиптическая дуга SVG

Post author:admin
Запись опубликована:22 марта, 2023
Post category:Вопросы по программированию

#svg

Вопрос:

Я часами пытался решить эту проблему, я пытаюсь нарисовать эллиптическую дугу, чтобы заполнить пробелы, обведенные красным, могу ли я получить для этого пример кода?

Редактировать:

Поскольку форма генерируется с помощью JavaScript, я добавлю элементы SVG, созданные из браузера:

 <svg width="500" height="500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 1 1 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

    <path id="__currentVal__" d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="skyblue"></path>
</svg>

Синяя фигура будет элементом с идентификатором __currentVal__ , команда эллиптической дуги будет вставлена в конце команды M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212

Ожидаемый результат будет таким (отредактирован с помощью MS Paint):

1. 1: Если вы «часами пытались решить эту проблему», то у вас будет код, который читатели могут оценить, поэтому, пожалуйста, опубликуйте его. 2. Запросы на такие вещи, как учебные пособия или документацию, определяются в справочном центре как не относящиеся к теме для переполнения стека.

2. Сначала, пожалуйста, попробуйте это: <svg viewBox="0 0 100 100" width="200"> <circle cx="50" cy="50" r="45" fill="#ddd"/> <path d="M50,50 L5,50 A45,45 0 0 1 27.5,11.028 L50,50z" fill="skyblue"/> </svg>

3. Взгляните на атрибут d пути. Это часть, рисующая дугу: A45,45 0 0 1 27.5,11.028 где 45 — радиус, если круг, а 27,5, 11,028 — координаты x и y точки, где заканчивается дуга. В этом случае дуга начинается в последней точке предыдущей строки (5,50). Чтобы иметь возможность помочь вам, мне нужно было бы знать радиус дуги, начальную точку и конечную точку. Пожалуйста, отредактируйте свой вопрос и добавьте эти значения

4. @underscore_d У меня есть только код, который рисует синий треугольник, я понятия не имел о том, как нарисовать простую эллиптическую дугу, но я бы отредактировал вопрос с помощью кода, спасибо.

5. @enxaneta Все координаты генерируются случайным образом с использованием JavaScript, возможно, я попытаюсь отредактировать вопрос с помощью того, что он сгенерирован из браузера, спасибо.

Ответ №1:

Это используемый вами общий атрибут: d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 "

M 75,300 означает, что вы перемещаетесь в точку x: 75, y: 300.

Поскольку вы используете команды в нижнем регистре, это относительные команды. Например l 150,0 , это означает, что вы перемещаете 150 единиц в x с 75 на 225. Значение y не меняется, что означает, что y: 300. Центр дуги находится в этой точке: x: 225, y: 300.

Эта часть команды также сообщает мне, что радиус дуги равен 150.

Далее путь ( l -106.06601717798213,-106.06601717798212 ) идет от предыдущей точки x: 225 y:300 до точки x:225-106.06601717798213 = 118,93398282201787, y:300-106.06601717798212 = 193,93 398282201787 = 193,93 398282201787

Я рисую небольшой круг, чтобы визуализировать эту точку (x:118.93398282201 , y:193.93398282201787 ). Здесь начнется дуга. Также я рисую еще один маленький круг в точке x: 75, y: 300. Здесь дуга закончится. Теперь я могу нарисовать дугу: M118.93398282201,193.93398282201787 A 150,150 0 0 0 75,300

 <svg  viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

    <path id="__currentVal__"d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" ></path>
  
  <circle cx="75" cy="300" r="5"/>
  <circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
  
  
 <path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300" />
</svg>

Если вам нужно нарисовать дугу по тому же пути, что и фактический синий треугольник, вы можете сделать это: вы начинаете свой путь с дуги, затем используете атрибут d своего пути без первой команды (переместить в). Вам не нужно переходить к этой точке, поскольку вы уже там (дуга заканчивается в этой точке)

 <svg  viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

   
  
  <circle cx="75" cy="300" r="5"/>
  <circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
  
  
 <path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300
 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" />
</svg>

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