How to make cool dynamic icons with SVG? (code example)

This chapter will introduce to you how to use SVG to create cool dynamic icons in HTML5? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Basic graphic elements

svg has some predefined shape elements: rectangle , circle , ellipse, straight line, polyline, polygon, path and text.

<!-- viewBox定义画布大小 width/height定义实际大小 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300">

    <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 -->
    <line x1="0" y1="0" x2="250" y2="30" />

    <!-- 多边形 通过多个点的坐标形成封闭图形 -->
    <polygon points="5,5 100,100 50,200" />

    <!-- 矩形 (x,y)为左上角起始点 -->
    <rect x="100" y="100" width="120" height="100" />

    <!-- 圆形 (cx,cy)圆心点 r半径 -->
    <circle cx="100" cy="50" r="40" stroke="black"/>

    <!-- 文本 (x,y)左下角坐标  -->
    <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>

</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 main style attributes:

stroke: stroke color
stroke-width: stroke width
stroke-opacity: Transparency of stroke
fill: fill color, i.e. background
fill-opacity: transparency of fill color
Transform: graphics transformation, similar to css3 transform

svg also supports many filter effects, such as gradient, shadow, blur, image mixing, 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 understand transform and coordinate system, you can refer to here.

3. Auxiliary elements

svg has several auxiliary elements:

The element is usually used to group related graphic elements for unified operations, such as rotating, scaling or adding related styles.
Realizes 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 it using .
can create its own window, which has the grouping function of and the initial invisible feature of .

For 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

<svg 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)" />
    </g>
    <g transform="translate(40 50)">
        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" />
    </g>
    <g transform="translate(60 50)">
        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />
    </g>
    <g transform="translate(80 50)">
        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />
    </g>
</svg>

4. Realization of animation

Animation effect of svg It is implemented based on the animation tag element:

　To achieve the transition effect of a single attribute;
​​Realize transform animation effect;
​​Achieve path animation effects.

The writing method of svg is very flexible. The style can be written as a tag attribute or in 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: followed by values Correspondingly, the time points of each point

calcMode: animation speed mode. discrete | linear | paced | spline

keySplines: Set the Bezier control points of motion, valid when calcMode is spline

##5. Code examples

circle draws a circle, fill coloring, wrap and position it with the g tag, transform sets the initial deformation, and animateTransform sets the animation. Now look at the code, I believe you will no longer be confused:

<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>

Rendering:

You can also use js to control the properties of svg, control The animation process of svg is made into an icon button that can respond to clicks and other events.

The above is the detailed content of How to make cool dynamic icons with SVG? (code example). For more information, please follow other related articles on the PHP Chinese website!