svg初学习(3)元素学习

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element

http://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/  鑫神例子

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过<use>元素来引用它们。

<svg width="100%" height="100%" viewBox="0 0 95 50"
     xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>

　这里是通过g元素组合circle对象继承它的属性　

 

linearGradient:用来定义线性渐变，用于图形元素的填充或描边。

stop:一个渐变上的颜色坡度，是用stop元素定义的。stop元素可以是<linearGradient>元素或者<radialGradient>元素的子元素。

defs:SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>元素呈现这些元素。

<svg width="440" height="440" viewBox="0 0 440 440" class="center">
            <defs>
                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
                    <stop offset="0%" stop-color="#e52c5c"></stop>
                    <stop offset="100%" stop-color="#ab5aea"></stop>
                </linearGradient>
                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
                    <stop offset="0%" stop-color="#4352f3"></stop>
                    <stop offset="100%" stop-color="#ab5aea"></stop>
                </linearGradient>
            </defs>
            <g transform="matrix(0,-1,1,0,0,440)">
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle>
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle>
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="534.5 1069"></circle>
            </g>
</svg>

　　

 

渐变色转动圈

<svg width="440" height="440" viewBox="0 0 440 440" class="center">
            <defs>
                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
                    <stop offset="0%" stop-color="#e52c5c"></stop>
                    <stop offset="100%" stop-color="#ab5aea"></stop>
                </linearGradient>
                <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
                    <stop offset="0%" stop-color="#4352f3"></stop>
                    <stop offset="100%" stop-color="#ab5aea"></stop>
                </linearGradient>
            </defs>
            <g transform="matrix(0,-1,1,0,0,440)">
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle>
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="0 1069">
                       <!--fill有freeze：动画效果被冻结在最后一个值。remove：动画效果会在活动周期结束之后被移除  -->
                       <!-- begin 可以在一个有id的animate执行完后执行  begin:firstC.end -2s; -->
                    <animate attributeName="stroke-dasharray" from="534.5 1069" to="1069 1069" dur="1s"
                         repeatcount="indefinited" begin="firstC.end" fill="freeze"/>
                </circle>
                <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="0 1069">
                    <animate attributeName="stroke-dasharray" from="0 1069" to="534.5 1069" dur="1s" id="firstC" fill="freeze"/>
                </circle>
            </g>
            
</svg>