Блог

Главная - Вопросы по программированию - Путь SVG не отображается в пользовательском интерфейсе, но он показывает как 0x0 в элементе проверки

Путь SVG не отображается в пользовательском интерфейсе, но он показывает как 0x0 в элементе проверки

#svg

#svg

Вопрос:

Я создаю путь SVG в typescript, но путь SVG не отображается на веб-странице, но в элементе проверки отображаются элементы. В элементе проверки размер пути svg отображается как 0x0. Мой код приведен ниже. Пожалуйста, помогите мне.

 <svg id="svg1" viewbox="-100 -100 500 500" class="svgStyle" xmlns="http://www.w3.org/2000/svg" style="position: absolute;" width="300px" height="300px" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="arc2" fill="none" stroke="#F1F1F1" stroke-width="40" stroke-linecap="round" d="M 234.8528137423857 234.8528137423857 A 120 120 0 1 0 65.14718625761428 234.8528137423857"></path>
</svg>

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

1. У вашего пути нет d атрибута

2. Путь не имеет d элемента и, следовательно, пуст. Таким образом, размер 0 на 0 имеет смысл.

3. Я вижу, вы отредактировали свой вопрос, и путь svg теперь имеет d атрибут. Путь, как он есть, теперь отображается правильно. Если вы создаете этот путь динамически, я подозреваю, что вы создаете его с помощью createElement метода. В SVG, чтобы создать новый элемент, вы должны использовать метод createElementNS . Также, если вы устанавливаете d атрибут только в JS, вам нужно использовать метод setAttributeNS() .