Как используя JavaScript нарисовать SVG окружность по заданным ширине\высоте блока?

Question

[IvanKalinin]

Все доброго времени.
Задача следующая.
Имеется блок квардратный с динамическими размерами. Как используя JS (зная высоту и ширину блока) нарисовать правильный path окружности внутри блока с его размерами?

Answer 1

[Станислав Дубровский]

Привет. Если нужна именно окружность, то тебе не нужен path, нужен circle:
jsfiddle.net/qnmy8kay
Соответственно вставлять в его атрибуты нужные значения.

Comments

[IvanKalinin]

Нужен именно Path, потому что нужно будет иногда не полную окружность рисовать (т.е. играть с dasharray и т.п)

[Станислав Дубровский]

Неполная окружность в смысле полукруг/четверть-круг? Какие вариации вообще могут быть, опиши подробней? Подумаем, может есть другие варианты, path как то коряво для такой задачи.
dasharray можно применить ко всем фигурам и тексту, не только к линии.

[IvanKalinin]

Вариации от 1 до 100 (чтото вроде прогрессбара). Возможно вокруг какого-то контента, но скорее всего просто окружность или ее часть в зависимости от условий

[Станислав Дубровский]

jsfiddle.net/qnmy8kay/1
В данном случае окружность рисуется не заливкой(fill="none"), а контуром большой толщины. играя параметрами stroke-dasharray и stroke-dashoffset можно добится желаемого(если я правильно понял задачу).

[IvanKalinin]

Похоже на то. Спасибо.

Answer 2

[Денис Инешин]

Круг то можно и без SVG нарисовать!

.test {
    width: 100px;
    height: 100px;
    background: #000;
    border-radius: 50%; // вот так
}

Если всё же сильно надо, то лучше использовать спец. библиотеки. Самостоятельно path вычислять замаешься.
d3js.org
raphaeljs.com

Comments

[IvanKalinin]

Из-за рисования парочки path подключать библиотеку как-то нет большого желания.
P.s. как написал в комментарии на ответ выше - по определенным причинам нужен именно path.