svg圆环效果2

  <svg width="220px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <circle cx="100" cy="100" r="100" stroke="#0b456a" stroke-width="8" transform="translate(10,10)"

            fill="transparent" />

        <path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200 a 100 100 0 0 1 0 -200 Z" fill="none" stroke-width="8"

            stroke="#00c9ff" stroke-linecap="round" stroke-dasharray="314" stroke-dashoffset='100'>

            <animate attributeName="stroke-dashoffset" from="628" to="0" dur="2s" repeatCount="indefinite" />

        </path>

        <circle cx="100" cy="100" r="100" stroke="#111f30" stroke-width="8" transform="translate(10,10)"

            stroke-dasharray="2.1,3" fill="transparent" />

    </svg>

不要问图片旋转更好解决，多学下奇葩代码也算累计正经知识。