6

На странице требуется создать несколько (не больше сотни точно, скорее десяток) интерактивных рисунков (надписи и некоторые элементы могут быть кнопками/ссылками)

введите сюда описание изображения

Подскажите, что лучше использовать css или svg. Лично пока склоняюсь к css + jQuery для позиционирования элементов

4
  • 4
    вопрос несколько абстрактный... Все зависит от ситуации... Мое мнение svg лучше...
    – Air
    13 мар 2018 в 12:09
  • 2
    Некоторые вещи которые на SVG делаются легко, нативно и понятно на CSS огромные и запутанные конструкции. Кроме того SVG предназначен для векторной графики, а у CSS совершенно другое предназначение. 13 мар 2018 в 12:14
  • 1
    проще, обычно, все деалть на css но по моему опыту, если элементы предполагают взаимодействие с пользователем (клики, ховеры и.т.п) лучше SVG. Но опять же все зависит от конкретной задачи
    – slowBro
    13 мар 2018 в 12:25
  • 1
    @Zhihar проще делать на том, что хорошо знаешь и умеешь делать. Знаете отлично css, значит вам проще сделать на css. Если знаете хоть немного svg, то конечно проще на svg. Всего несколько строчек кода svg и никаких проблем с адаптивностью 13 мар 2018 в 13:53

1 ответ 1

6

Для графики, где много линий, кругов, фигур со сложными контурами лучше использовать SVG. Графика должна быть векторной.
Не надо ставить вопрос,- только SVG или только CSS и JS . Вся эта троица прекрасно дополняет друг друга.
В вашем примере, конечно лучше использовать SVG. Узоры повторяются, значит нужно использовать pattern, в который необходимо поместить одно звено цепи, а потом автоматически заполнять выбранный регион элементом паттерна. Заполнение паттерном идет по рядам, слева направо, после заполнения одного ряда, начинается заполнение следующего ряда.
Подробнее о svg патернах здесь и здесь

Ниже пример кода для одного звена:

#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}
<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine"   x="0" y="0" width="106" height="16"
             patternUnits="userSpaceOnUse" >
<g>
			 <polyline points="16,8 107,8" stroke="#3D6B93" />

 

<circle id="bigCircle" cx="8" cy="8" r="7"  /> 
<circle id="centerCircle" cx="8" cy="8" r="2.5"   /> 
<circle id="leftCircle" cx="16" cy="8" r="2.5"  /> 
<circle id="rightCircle" cx="104" cy="8" r="2.5"  />
</g>
</pattern>
</defs> 

<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" /> 
</svg>

В секции <defs>... </defs> с помощью базовых фигур создаем элемент паттерна. Он не будет виден до тех пор пока мы не используем его для заполнения какой-то фигуры. Фигура внутри паттерна может иметь любые очертания, но она всегда заключена в прямоугольник, который должен быть не меньше габаритных размеров самой фигуры.
В нашем случае размеры паттерна определяют width="106" height="16"

Команда заполнения паттерном :

<rect y="16" width="106.5" height="16" stroke="none" fill="url(#circleLine)" />    

Габаритные размеры прямоугольника равны размерам паттерна, поэтому разместилось одно звено.

Для увеличения количества звеньев просто увеличим ширину прямоугольника. Понятно, чтобы не было обрезки последней фигуры, необходима кратность размеров

Пример с пятью звеньями

#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}
<svg viewBox="0 0 550 100" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine"   x="0" y="0" width="107" height="16"
             patternUnits="userSpaceOnUse" >
<g>
			 <polyline points="16,8 107,8" stroke="#3D6B93" />

 

<circle id="bigCircle" cx="8" cy="8" r="7"  /> 

<circle cx="1" cy="8" r="2.5" fill="#3D6B93" /> 

<circle id="centerCircle" cx="8" cy="8" r="2.5"   /> 
<circle id="leftCircle" cx="16" cy="8" r="2.5"  /> 
<circle id="rightCircle" cx="108" cy="8" r="2.5"  />
</g>
</pattern>
</defs> 

<rect y="16" width="530" height="16" stroke="none" fill="url(#circleLine)" /> 
</svg>

И ещё один пример с многорядовым заполнением:

#bigCircle {
fill:none;
stroke:#3D6B93;
}
#leftCircle, #rightCircle  {

fill:#3D6B93;
} 

#centerCircle {
fill:#01AA4D;
}
<svg viewBox="0 0 550 150" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="circleLine"   x="0" y="0" width="107" height="16"
             patternUnits="userSpaceOnUse" >
<g>
			 <polyline points="16,8 107,8" stroke="#3D6B93" />

 

<circle id="bigCircle" cx="8" cy="8" r="7"  /> 

<circle cx="1" cy="8" r="2.5" fill="#3D6B93" /> 

<circle id="centerCircle" cx="8" cy="8" r="2.5"   /> 
<circle id="leftCircle" cx="16" cy="8" r="2.5"  /> 
<circle id="rightCircle" cx="108" cy="8" r="2.5"  />
</g>
</pattern>
</defs> 

<rect y="16" width="530" height="128" stroke="none" fill="url(#circleLine)" /> 
</svg>

Решение полностью адаптивно, работает во всех браузерах, включая IE11, Edge

4
  • круто, а если некоторые из кругов должны быть ссылками по которым вызывается выполнение какой-нибудь js функции или под кругом находится кнопка (хотя тут как я понимаю подойдет и чистый js который добавить <div> с нужными стилями
    – Zhihar
    13 мар 2018 в 19:33
  • @Zhihar без проблем, ставите свойство pointer-events="none" и клик проходит сквозь фигуру на кнопку под узорами. Если мой ответ вам был полезен, не забудьте поставить плюс и чекбокс :) 13 мар 2018 в 19:37
  • лови плюсик, подробно описал, спасибо. Касательно второго вопроса "клик проходит сквозь фигуру на кнопку под узорами" - т.е. получается, что мне придётся все таки сгенерировать невидимые кнопки на уровне html (div например) и расположить их в нужном месте или можно отследить именно нажатие на конкретный svg элемент?
    – Zhihar
    14 мар 2018 в 7:41
  • если бы я ее ещё видел :)
    – Zhihar
    14 мар 2018 в 7:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.