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 , circle , ellipse , straight line , polyline, polygon, path and text.

 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: . They do not represent specific shapes, but help with group management, reuse, etc. of graphic elements. Detailed introduction can be found here.

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

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

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

• can create its own window, which has both the grouping function of and the initial invisible feature of .

• Regarding the transform base point problem mentioned above, you can reset the base point by nesting the tag and offsetting the position of . 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:

　 Realizes the transition effect of a single attribute,

　 Realizes the transform transformation animation effect,

　 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!