Использование stroke-dasharray
Все привыкли к стандартному использованию рисования из начала или конца отрезка в сторону увеличения или уменьшения линии.
Поэтому понять сразу, как можно использовать этот атрибут для одновременного рисования из одной точки в разные стороны, довольно сложно. Начнём с самых простых основ.
Допустим у нас окружность R="90px"
Длина окружности будет равна C=2πr = 2 * 3.14 * 90 ≈ 565.2
Половина окружности равна 565,2 / 2 ≈ 282.6
stroke-dasharray="282.6 282.6"
первая цифра длина черты (полокружности), вторая цифра пробел
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" cx="100" cy="100" r="90" stroke-dasharray="282.6 282.6"/>
</svg>
</div>
Пока всё понятно - первая половина окружности закрашена, вторая пробел
Теперь установим stroke-dasharray="282.6 0"
Первая половина окружности закрашивается, вторая половина окружности пропускается, снова закрашивается половина окружности, это уже вторая половина и снова пропуск. В итоге закрашивается вся окружность.
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" cx="100" cy="100" r="90" stroke-dasharray="282.6 0"/>
</svg>
</div>
Теперь установим stroke-dasharray="0 282.6"
Первая половина окружности, где должна быть черта пропускается, вторая половина окружности, где должен быть пробел пропускается. В итоге вся окружность не окрашена.
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" cx="100" cy="100" r="90" stroke-dasharray="0 282.6"/>
</svg>
</div>
Используя эти данные напишем формулу анимации при которой окружность будет заполняться из одной точки в разные стороны:
<circle id="crc1" transform="rotate(90 100 100)" cx="100" cy="100" r="90" stroke-dasharray="0 282.6 0 282.6" >
<animate attributeName="stroke-dasharray" values="0 282.6 0 282.6;0 0 565.2 0" dur="5s" fill="freeze" />
</circle>
Ниже полный код заполнения слева-направо
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" transform="rotate(0 100 100)" cx="100" cy="100" r="90" stroke-dasharray="0 282.6 0 282.6" >
<animate attributeName="stroke-dasharray" values="0 282.6 0 282.6;0 0 565.2 0" dur="5s" fill="freeze" />
</circle>
</svg>
</div>
Сверху-вниз
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" transform="rotate(90 100 100)" cx="100" cy="100" r="90" stroke-dasharray="0 282.6 0 282.6" >
<animate attributeName="stroke-dasharray" values="0 282.6 0 282.6;0 0 565.2 0" dur="5s" fill="freeze" />
</circle>
</svg>
</div>
Справа - налево
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" transform="rotate(180 100 100)" cx="100" cy="100" r="90" stroke-dasharray="0 282.6 0 282.6" >
<animate attributeName="stroke-dasharray" values="0 282.6 0 282.6;0 0 565.2 0" dur="5s" fill="freeze" />
</circle>
</svg>
</div>
Снизу - вверх
.container{
width:100%;
height:100%;
}
#crc1{
fill:none;
stroke:red;
stroke-width:10;
}
#bg{
fill:none;
stroke:#D5D5D5;
stroke-width:10;
}
<div class="container">
<svg height="200" width="200" viewBox="0 0 200 200">
<defs>
</defs>
<circle id="bg" cx="100" cy="100" r="90" />
<circle id="crc1" transform="rotate(270 100 100)" cx="100" cy="100" r="90" stroke-dasharray="0 282.6 0 282.6" >
<animate attributeName="stroke-dasharray" values="0 282.6 0 282.6;0 0 565.2 0" dur="5s" fill="freeze" />
</circle>
</svg>
</div>