How SVG dynamic icons are implemented

This article shares with you how to implement SVG dynamic icons. Friends in need can refer to it.

                                                                                    ’s ’       ’s ’           ’’s ’       ‐ ‐ ‐ ‐‐ ‐‐‐‐‐‐ and ​ to see a lot of amazing loading icons on loading.io. They are all written in svg, with just a few lines of code. They are more refined and smaller than img images, and more flexible and efficient than pure DOM implementation. You can also make the icon respond to click events.

How to draw these circles and squares? How to color? How to move? Let’s take a look at the basics of svg first, and then draw the first icon above.

1. Basic graphic elements

svg has some predefined shape elements: rectangle 4f5c91326734be5b874f0369b6cec59d, circle 30de22e41cb8eb8fbfdc1f091d85e4be, ellipse d9b42b40d0fdc429c7c48871eea4816c, straight line 15a73cc5312745b1b00671f6e690e36a , polylinece803ba1a4290bddb3ba9c6f57d4c9b4, polygon6f1cb7f8499a7e0f625f982868cbc44d, path98953a78f52873edae60a617ec082494 and text28f128881ce1cdc57a572953e91f7d0f.

 1 <!-- viewBox定义画布大小 width/height定义实际大小 --> 
 2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300"> 
 3  
 4     <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 --> 
 5     <line x1="0" y1="0" x2="250" y2="30" /> 
 6  
 7     <!-- 多边形 通过多个点的坐标形成封闭图形 --> 
 8     <polygon points="5,5 100,100 50,200" /> 
 9 
 10     <!-- 矩形 (x,y)为左上角起始点 -->
 11     <rect x="100" y="100" width="120" height="100" />
 12 
 13     <!-- 圆形 (cx,cy)圆心点 r半径 -->
 14     <circle cx="100" cy="50" r="40" stroke="black"/>
 15 
 16     <!-- 文本 (x,y)左下角坐标  -->
 17     <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>18 19 </svg>

2. Style and effect

The style of the svg element can be written as the attribute of the tag, or it can be written in style. Here are some of the main style properties:

stroke: Stroke color
stroke-width: Stroke width
stroke-opacity: The transparency of the stroke
fill: The fill color, that is, background
fill-opacity: The transparency of the fill color
transform: graphics transformation, similar to css3 transform
svg also supports many filter effects, including gradients, shadows, blurs, and image blending etc. You don’t need to know that much. For example, if you want to draw a few colored circles, just use circle and fill.

Note: transform defaults to the upper left corner of svg as the base point, not the center of the circle or other center. The upper left corner is the origin of the svg coordinate system. To learn about transform and coordinate systems, you can refer here.

3. Auxiliary elements

svg has several auxiliary elements: 3e85b886453624fdb0fdf16e0b451ee0 9f9d05a576cea0d265e9d798da82bdec 5aaf33f5e4c7c54d016a539db37ebcc8 2199a63ce40299beb55b2a8b469dfcd6. They do not represent specific shapes, but help with group management, reuse, etc. of graphic elements. Detailed introduction can be found here.

3e85b886453624fdb0fdf16e0b451ee0 Elements are usually used to group related graphic elements for unified operations, such as rotating, scaling or adding related styles.

• ##2199a63ce40299beb55b2a8b469dfcd6 To realize the reuse of existing SVG graphics, you can reuse a single SVG graphic element or a group element defined by 3e85b886453624fdb0fdf16e0b451ee09f9d05a576cea0d265e9d798da82bdec.

• 9f9d05a576cea0d265e9d798da82bdec Internally defined elements will not be displayed directly. You do not need to define the style in advance, but define it when instantiating using 2199a63ce40299beb55b2a8b469dfcd6.

• 5aaf33f5e4c7c54d016a539db37ebcc8 can create its own window, which has both the grouping function of 3e85b886453624fdb0fdf16e0b451ee0 and the initial invisible feature of 9f9d05a576cea0d265e9d798da82bdec.

• Regarding the transform base point problem mentioned above, you can reset the base point by nesting the 3e85b886453624fdb0fdf16e0b451ee0 tag and offsetting the position of 3e85b886453624fdb0fdf16e0b451ee0. Draw several horizontally arranged circles as follows, and set different zoom sizes to get

 1 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 
 2     <g transform="translate(20 50)"> 
 3         <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" /> 
 4     </g> 
 5     <g transform="translate(40 50)"> 
 6         <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" /> 
 7     </g> 
 8     <g transform="translate(60 50)"> 
 9         <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
 10     </g>
 11     <g transform="translate(80 50)">
 12         <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
 13     </g>
 14 </svg>

IV. Realization of animation

The animation effect of svg is Based on the animation tag element:

　 95b9bf201d21a40abe523e82bfc3ece7 Realizes the transition effect of a single attribute,

　 b32227fb1e5c965892584259ad65af80 Realizes the transform transformation animation effect,

　 1c3f862fe048da235fb9de11bfd05e0d Implement path animation effects.

The writing method of svg is very flexible. The style can be written as a tag attribute or in the style. The animation tag can be specified through xlink or written inside the animation element. The following demonstrates the xlink writing method of animateTransform:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect>
    <animateTransform 
        xlink:href="#animateObject" <!-- 指定动画元素 -->
        attributeName="transform"  <!-- 需要动画的属性名称 -->
        type="scale"  <!-- 指定transform属性 -->
        begin="0s"    <!-- 开始时间，即延迟 -->
        dur="3s"      <!-- 动画时间 -->
        from="1"      <!-- 开始值 -->
        to="2"        <!-- 结束值 -->
        repeatCount="indefinite"   <!-- 重复方式，indefinite无限重复  -->
    />
</svg>

The animation in the above example is the transition from A to B. To form a smooth cycle, at least three key points must be defined. . animateTransform supports more flexible attribute settings:

values: values ​​of multiple key points, replacing from and to, such as values="0;1;0"

• keyTimes：跟values对应，各个点的时间点

• calcMode：动画快慢方式。discrete | linear | paced | spline

• keySplines：设置运动的贝塞尔控制点，calcMode为spline时有效

 　　对svg动画的更详细介绍，参考 这里 。

五、代码实例

　　     

　　circle画圆，fill着色，用g标签包裹并定位，transform设置初始形变，animateTransform设置动画。现在来看代码，相信不会再是一头雾水了：

<svg class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(20 50)">
        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)">
            <animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)">
            <animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)">
            <animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)">
            <animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
        </circle>
    </g>
</svg>

 相关推荐：

JS如何操作svg来画图

The above is the detailed content of How SVG dynamic icons are implemented. For more information, please follow other related articles on the PHP Chinese website!