Этот вопрос задавался много раз и есть хорошие решения при помощи использования javascript, например такой код:
var shapeClick = document.getElementById("shape").addEventListener("click", changeColor);
var clicks = 0;
function changeColor(){
if (shape.style.fill == "rgb(29, 172, 249)")
{
shape.style.fill = "rgb(255, 0, 0)";
}
else {
shape.style.fill = "rgb(29, 172, 249)";
}
}
Всё отлично работает, с помощью скриптов можно сделать очень много.
Внимание вопрос
Как сделать тоже самое на чистом SVG (SMIL), не используя javascript и CSS
Просто сменить цвет по клику не составляет труда:
Но как сменить цвет обратно, повторно кликая по объекту не приходит в голову.
Ответ
if (shape.style.fill == "rgb(29, 172, 249)")
Так лучше не надо. А то кто-нибудь вернёт 1DACF9 вместо rgb(29, 172, 249) и всё.
Как сделать тоже самое на чистом SVG, SMIL не используя - javascript, CSS
label {
display: block;
}
#red {
display: none;
}
svg {
width: 250px;
display: block;
}
#shape {
fill: green;
stroke: black;
stroke-width: 2;
}
#red:checked + svg #shape {
fill: red;
}
где и как обрабатывается клик по элементу?
В примере выше получился клик по всему svg
Чтобы это исправить, можно воспользоваться pointer-events
label {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
#red {
display: none;
}
svg {
width: 250px;
display: block;
}
foreignObject svg {
pointer-events: none;
}
#shape {
fill: green;
stroke: black;
stroke-width: 2;
pointer-events: all;
}
#red:checked + svg #shape {
fill: red;
}
Если внутри одного svg надо разместить несколько таких объектов, можно воспользоваться foreignObject, однако следует отметить, что его поддержка браузерами весьма сомнительна
label {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
#red {
display: none;
}
svg {
width: 250px;
display: block;
}
foreignObject svg {
pointer-events: none;
}
#shape {
fill: green;
stroke: black;
stroke-width: 2;
pointer-events: all;
}
#red:checked + svg #shape {
fill: red;
}
Комментариев нет:
Отправить комментарий