#javascript #svg
#javascript #svg
Вопрос:
Я пытаюсь создать форму, похожую на мост, с помощью svg, используя javascript. С помощью следующего html я получаю общую форму, но путь закрытия неверен:
<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
<path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1"
d="M 0 0 V 207 H 30
M 30 207 q 0 -177 177 -177
M 207 30 q 177 0 177 177
H 414 V 0 H 0 z">
</path>
</svg> Это приводит к следующей форме: 
Он закрывается странным образом, что означает, что он заполняется неправильно. Странной вертикальной линии от верхней части арки до верхнего левого края не должно быть. Как мне заставить его правильно закрываться и правильно заполняться?
Ответ №1:
Путь закроется от вашей последней точки до последней объявленной M . Вы можете исправить это, удалив все M вызовы, кроме первого. Поскольку вы создаете непрерывную линию, вам не нужно каждый раз переходить к новой точке.
<svg height="897" width="414" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 414 897">
<path stroke-width="3" stroke="blue" style="fill:transparent; fill-opacity: 1"
d="M 0 0 V 207 H 30
q 0 -177 177 -177
q 177 0 177 177
H 414 V 0 H 0 z">
</path>
</svg> Комментарии:
1. Это заметно удаляет странную строку, но если я добавлю заливку к пути, вы увидите, что она все еще там, и она заполняется неправильно
2. @joshuajackson я внес правку в фрагмент. Проверьте это, теперь это также работает, если вы заполните svg