Shulou(Shulou.com)06/01 Report--

This article mainly shows you "html5 how to write dynamic graphic design", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "html5 how to write dynamic graphic design" this article.

I. basic graphic elements

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

Try SVG

II. Style and effect

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

Stroke: stroke color

Stroke-width: stroke width

Stroke-opacity: transparency of strokes

Fill: fill color, or background

Fill-opacity: transparency of fill color

Transform: graphic transformation, similar to css3 transform

Svg also supports many filter effects, such as gradient, shadow, blur, image blending, and so on. You don't need to know so much, for example, to draw a few color circles, use circle with fill.

Note: by default, transform is based on the upper-left corner of svg, not the center of the circle or other centers. The upper left corner is the origin of the svg coordinate system. For more information about transform and coordinate system, you can refer to it here.

III. Auxiliary elements

Svg has several auxiliary elements:. They do not represent specific shapes, but help to group and manage graphical elements, reuse, and so on. For a specific introduction, please refer to here.

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

To reuse existing SVG drawings, you can reuse a single SVG graphic element or a defined group element.

Internally defined elements are not displayed directly and can be defined instead of defining styles in advance, but when instantiation is used.

Be able to create your own windows with both grouping and initial invisibility.

For the transform base point problem mentioned above, you can reset the base point by nesting the label and offsetting the position. Draw several horizontal circles and set different zoom sizes as follows

Fourth, the realization of animation

The animation effect of svg is based on animation tag elements:

Realize the transition effect of single attribute

Realize the animation effect of transform transform

Realize the path animation effect.

The writing of svg is very flexible, the style can be written as tag attributes or in style, and animation tags can be specified through xlink or written inside animation elements. The following is a demonstration of the xlink writing of animateTransform:

Xlink:href= "# animateObject"

AttributeName= "transform"

Type= "scale"

Begin= "0s"

Dur= "3s"

From= "1"

To= "2"

RepeatCount= "indefinite"

/ >

The animation in the above example is the transition from A to B. to form a smooth loop, at least three key points need to be defined. AnimateTransform supports more and more flexible property settings:

Values: the value of multiple key points, replacing from and to, such as values= "0 position 1"

KeyTimes: corresponding to values, the time point of each point

CalcMode: animation speed mode. Discrete | linear | paced | spline

KeySplines: sets the Bessel control point for motion. It is valid when calcMode is spline.

5. Code examples

Circle draws circles, fill shades, wraps and positions with g tags, transform sets initial deformation, animateTransform animates. Now when it comes to the code, I'm sure it won't be confused anymore:

These are all the contents of the article "how to write dynamic graphic Design in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.