CSS3 ? SVG? ???? ?? ?? ?? ????? ??? ?? ? ????. ??? ??? ????. SVG ??? ??? ?? ??? ??????. ?? ??? ?? ?? ???? ??????. CSS3 ?????? ???? ??? ???? ??????. ??? ?? ???? ???? ??? ???? ??????.

CSS3 ? SVG? ???? ?? ?? ?? ?????? ????

?? ?? ?? ????? ??? ?? ??? ?? ?? ?? ??? ???? ???? ???? ?????. ? ??? CSS3 ? SVG? ???? ?? ?? ? ????.

??:

1. SVG ??? ????

??? ?? ?? ?? ? SVG ??? ????. SVG ???? ??? ?? ?? ??? ???? ?? ??? ??????.

 <code><svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke-width="10" fill="none"></circle> </svg></code>

2. ?? ?? ???? ??????

?? ??? ?? ???? ???? ?? ??? ?? ? ?? ?????. Stroke-Dasharray ? Stroke-Dashoffset ??? ???? ?????.

 <code>circle { stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; }</code>

3. CSS3 ?????? ??????

CSS3 ?????? ???? ?? ??? ???? ??????. ?????? ?? ??? ?? ??? ???? ?? ??? ???? ??????? ????? ?? ??? ????? ???? ?????? ??? ??? ??? ???? ????????.

 <code>@keyframes progress { to { stroke-dashoffset: 0; } } circle { animation: progress 5s forwards; }</code>

4. ???? ??????

????-?? ???? ?? ?? ???? ??? ???? ??????. ??? (??? 1- %) * ??? ? ??.

 <code>circle { stroke-dashoffset: calc((1 - 0.5) * 251.32741228718345); }</code>

?? ?? :

 <code>   <style> svg { width: 100; height: 100; } circle { stroke-width: 10; fill: none; stroke-dasharray: 251.32741228718345; stroke-dashoffset: 251.32741228718345; animation: progress 5s forwards; } @keyframes progress { to { stroke-dashoffset: 0; } } </style>   <svg> <circle cx="50" cy="50" r="40"></circle> </svg>  </code>

? ??? CSS3 ? SVG? ???? ?? ??? ? ????? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!