На странице требуется создать несколько (не больше сотни точно, скорее десяток) интерактивных рисунков (надписи и некоторые элементы могут быть кнопками/ссылками)
Подскажите, что лучше использовать css или svg.
Лично пока склоняюсь к css + jQuery для позиционирования элементов
Ответ
Для графики, где много линий, кругов, фигур со сложными контурами лучше использовать SVG. Графика должна быть векторной.
Не надо ставить вопрос,- только SVG или только CSS и JS . Вся эта троица прекрасно дополняет друг друга.
В вашем примере, конечно лучше использовать SVG. Узоры повторяются, значит нужно использовать pattern, в который необходимо поместить одно звено цепи, а потом автоматически заполнять выбранный регион элементом паттерна.
Заполнение паттерном идет по рядам, слева направо, после заполнения одного ряда, начинается заполнение следующего ряда.
Подробнее о svg патернах здесь и здесь
Ниже пример кода для одного звена:
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
В секции
Команда заполнения паттерном :
Габаритные размеры прямоугольника равны размерам паттерна, поэтому разместилось одно звено.
Для увеличения количества звеньев просто увеличим ширину прямоугольника. Понятно, чтобы не было обрезки последней фигуры, необходима кратность размеров
Пример с пятью звеньями
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
И ещё один пример с многорядовым заполнением:
#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle {
fill:#3D6B93;
}
#centerCircle {
fill:#01AA4D;
}
Решение полностью адаптивно, работает во всех браузерах, включая IE11, Edge
Комментариев нет:
Отправить комментарий