#1 Вариант с использованием USE
Для решения совсем необязательно рисовать много фигур svg.
Достаточно в секции defs
задать один раз окружность без привязки к координатам.
<defs>
<circle id="crc1" r="12px" />
</defs>
И в дальнейшем многократно использовать:
<use xlink:href="#crc1" x="20px" y="20px" />
<use xlink:href="#crc1" x="55px" y="20px" />
<use xlink:href="#crc1" x="90px" y="20px" />
Ниже пример трех групп окружностей:
svg circle{
fill:inherit;
}
#crc1 {
fill:yellowgreen;
}
#crc2 {
fill:mediumseagreen;
}
#crc3 {
fill:teal;
}
#crc1:hover, #crc2:hover , #crc3:hover
{
fill:red;
transition: 0.4s ;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" >
<defs>
<circle id="crc1" r="12px" />
<circle id="crc2" r="12px" />
<circle id="crc3" r="12px" />
</defs>
<use xlink:href="#crc1" x="20px" y="20px" />
<use xlink:href="#crc1" x="55px" y="20px" />
<use xlink:href="#crc1" x="90px" y="20px" />
<use xlink:href="#crc2" x="20px" y="55px" />
<use xlink:href="#crc2" x="55px" y="55px" />
<use xlink:href="#crc2" x="90px" y="55px" />
<use xlink:href="#crc2" x="125px" y="55px" />
<use xlink:href="#crc3" x="20px" y="90px" />
<use xlink:href="#crc3" x="55px" y="90px" />
<use xlink:href="#crc3" x="90px" y="90px" />
<use xlink:href="#crc3" x="125px" y="90px" />
<use xlink:href="#crc3" x="160px" y="90px" />
</svg>
Анимация css transition
при наведении работает только в Firefox
Видимо комбинацию svg команды use и css transition браузеры Chrome и Opera не воспроизводят.
Ниже пример с SVG анимацией работает во всех браузерах кроме IE, Edge
Анимацию при наведении курсора выполняет команда:
<set attributeName='fill' to='red' begin='mouseover' end='mouseout' />
circle{
fill:inherit;
}
#crc1 {
fill:yellowgreen;
}
#crc2 {
fill:mediumseagreen;
}
#crc3 {
fill:teal;
}
#crc1:hover, #crc2:hover , #crc3:hover
{
fill:red;
transition: 0.5s;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" >
<defs>
<circle id="crc1" r="12px" >
<set attributeName='fill' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle id="crc2" r="12px" >
<set attributeName='fill' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle id="crc3" r="12px">
<set attributeName='fill' to='red' begin='mouseover' end='mouseout' />
</circle>
</defs>
<use xlink:href="#crc1" x="20px" y="20px" />
<use xlink:href="#crc1" x="55px" y="20px" />
<use xlink:href="#crc1" x="90px" y="20px" />
<use xlink:href="#crc2" x="20px" y="55px" />
<use xlink:href="#crc2" x="55px" y="55px" />
<use xlink:href="#crc2" x="90px" y="55px" />
<use xlink:href="#crc2" x="125px" y="55px" />
<use xlink:href="#crc3" x="20px" y="90px" />
<use xlink:href="#crc3" x="55px" y="90px" />
<use xlink:href="#crc3" x="90px" y="90px" />
<use xlink:href="#crc3" x="125px" y="90px" />
<use xlink:href="#crc3" x="160px" y="90px" />
</svg>
#2 Вариант с использованием translate(x y)
svg path{
fill:inherit;
stroke:inherit;
}
#crc1 {
fill:dodgerblue;
}
#crc2 {
fill: royalblue;
}
#crc3 {
fill: blueviolet;
}
#crc1:hover, #crc2:hover , #crc3:hover
{
fill: limegreen;
transition: 0.4s;
}
<svg viewBox="0 0 420 420" >
<defs>
<g id="crc1" >
<set attributeName='stroke' to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill' to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="3.5" />
<path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g>
<g id="crc2">
<set attributeName='stroke' to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill' to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="9.5" />
<path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g>
<g id="crc3">
<set attributeName='stroke' to='limegreen' begin='mouseover' end='mouseout'/>
<set attributeName='fill' to='lime' begin='mouseover' end='mouseout'/>
<circle cx="38.63" cy="64" r="35" fill="none" stroke-width="14.5" />
<path d="M38.8 31.3 69.4 53.6 57.6 89.6 19.7 89.5 8.1 53.4z" stroke-width="4" />
</g>
</defs>
<use xlink:href="#crc1" x="20px" />
<use xlink:href="#crc1" x="100px" />
<use xlink:href="#crc1" x="180px" />
<g transform="translate(0 100)">
<use xlink:href="#crc2" x="20px" />
<use xlink:href="#crc2" x="100px" />
<use xlink:href="#crc2" x="180px" />
<use xlink:href="#crc2" x="260px" />
</g>
<g transform="translate(0 200)">
<use xlink:href="#crc3" x="20px" />
<use xlink:href="#crc3" x="100px" />
<use xlink:href="#crc3" x="180px" />
<use xlink:href="#crc3" x="260px" />
<use xlink:href="#crc3" x="340px" />
</g>
</svg>
path
, можно было бы делать относительныйm
. Для групп ничего такого не выйдет?path
относительные координаты работают только внутри одного тега.