An in-depth analysis of SVG_html5 tutorial techniques in HTML5

SVG Background

SVG is the abbreviation of Scalable Vector Graphics, which means scalable vector graphics. In 1998, the World Wide Web Consortium established a working group to develop a technology for expressing vector graphics through XML - SVG! Since SVG is also an XML file, SVG also inherits the advantages of XML's openness, portability and interactivity. Nowadays, almost all major browsers support SVG. You can get more compatibility information from here, including:

Use or elements to display basic SVG graphics; Use to display SVG graphics; Apply SVG graphics as CSS background images; Directly Use the tag in HTML documents (requires HTML5 support); Use SVG transformations, filters and other special effects on HTML elements that use CSS or external object elements; Use photoshop-like effects on SVG objects. Includes blurring and color manipulation; Use animations with SVG images; Use fonts in SVG format;

* SVG * Basic content * SVG is not exclusive content of HTML5 * HTML5 provides native content about SVG * Before the emergence of HTML5, there was SVG content * SVG, simply speaking, is a vector image * The extension of SVG file is ".svg" * SVG uses XML syntax * Concept * SVG is a description using XML technology The language of two-dimensional graphics * Features of SVG * SVG drawn graphics can be crawled by search engines * SVG can be enlarged without reducing the quality of the image * The difference between SVG and Canvas * SVG * Does not depend on resolution * Supports event binding * Programs with large rendering areas (such as Baidu Maps) * Cannot be used to implement web games * Canvas * Depends on resolution * Does not support event binding * Most suitable for web games * Save images in ".jpg" format * Usage * Some small files on web pages Icons * Dynamic special effects (animation effects) in web pages * Use SVG in HTML5 * Use elements * Function - similar to elements * The default size is 300px*150px * Use CSS style * Use SVG to draw graphics, you must define the element in * Draw graphics * Rectangular element

Copy the code The code is as follows: SVG draws rectangle If you use the svg tag in an HTML page * Define the element * Similar to the role of the element * Default size 300px * 150px * Set width and height - attributes and style * All graphics drawn using svg must be defined within the element * Graphics drawn using svg are related to HTML pages --> Draw a rectangle - * x and y - coordinates of the upper left corner of the drawn rectangle * width and height - width and height of the drawn rectangle * Must use attributes, not style * Default color is Black Set color - you can use attributes or styles * fill - set fill color * stroke - set stroke color set line width * stroke-width Note * For graphics drawn by svg, use the style method to set the style. Instead of using CSS attributes, you use SVG attributes --> * Circle element Draw a circle - * cx and cy - the circular coordinate value of the circle * r - the radius of the circle --> * Ellipse element * Line element element can only contain one graphic element, or can it contain multiple graphic elements? * Can contain multiple graphic elements --> * Polyline element Element - Polyline * points - Set the starting point, vertex and end point * Use "," to separate x and y * Use between multiple points Space separated Characteristics of polyline * The area in the polyline (starting point to end point) is provided in black by default --> * Polygonal element * Special effect elements * Gradient - the gradient element is defined within the element * Linear gradient - * This element is the starting element Set linear gradient - * Usage - Define the gradient in &lt ;defs> in element * Features - has baseline * Starting point coordinate value - x1 and y1 * Ending point coordinate value - x2 and y2 * Note * This element is the start Element * The values of x1 and y1, x2 and y2 are all percentages * Define the id attribute * Used to add the set gradient to the drawn graphic element Medium * Use the element - set the color of the gradient * offset - set the position of the gradient color * The value is also a percentage * stop-color - set the color of the gradient * stop-opacity - Set the transparency of the gradient color --> How to set the linear gradient above and add it to the rectangle below? * Use the fill attribute, the value is url (#id value of the gradient element) --> * Sector (Ray) Gradient- * Filter-Gaussian Blur * Filter uses element * Element-Gaussian Blur * in="SourceGraphic" * stdDeviation - Set the blur level

Copy code The code is as follows: How to set Gaussian blur filter * Define the element - the filter is defined in In this element * Define element - a filter representing SVG * Define Gaussian Blur element * Attribute * in="SourceGraphic" - Fixed writing * stdDeviation - Set the degree of blur * Define the id attribute value for the element * Conveniently added to elements that draw graphics --> How to associate the Gaussian blur above with the elements below * Use the filter attribute, the value is url(#id) * Set the filter of the current graphic - -> &lt ;/svg> * Note - defined in the element * TWO.js * Basic content * JS library introduction * three.js - specifically used For drawing three-dimensional graphics * two.js - specifically for drawing two-dimensional graphics * formats supported by two.js * SVG - default * Canvas * WebGL - specifically for Draw an image * How to use two.js * Introduce two.js file into HTML page * Define container ( ) in HTML page * In javascript code * Get the container in the HTML page * Create a Two object and add the object to the container new Two(params).appendTo(Element); * Use the API method provided by two.js Draw * Use the method provided by two.js to set the graphics * Use the update() method to draw * Create a Two object * Constructor - new Two(params) * params Parameters - Set the information of the current object * type - Set the currently used format (Two.Types.svg) * svg - Default value * canvas * webgl * width and height - Set width and height * fullscreen - Set whether to be full screen * Boolean value, true means full screen * Graphics method * makeLine() - Draw a line * makeRectangle() - Draw a rectangle * makeCircle() - Draw a circle * makeEllipse() - Draw an ellipse * Animation method * update() - Update animation * play() - Add animation (loop) * pause() - Delete animation * Set the style of drawing graphics * When calling the drawing method of Two object to draw graphics, return the graphics object * Set related attribute values through this graphics object * Grouping operation * Two.Group * Animation effect * bind(event,callback) method - event binding * event - binding event name * update - Corresponding function of update() method * All DOM events can be bound * callback - event handling function * extended content * front-end development tool * Aptana Studio 3 - code Tips * Webstrom - Domestic front-end developer artifact * Actual development * Multi-use SVG * No distortion * Searchable * Page optimization-reduce external links * * * Canvas - HTML drawing graphics * In actual operation, it appears as a picture (.png) * Cannot be crawled by search engines * Distortion after magnification * SVG content * Very large amount of content * Static drawn graphics * Dynamic animation effects * Specialized Provide events * There is very little information about SVG on the Internet (no books) * SVG specification (W3C English) * SVG or CANVAS is defined in the HTML page * Only one element can be defined , or can multiple elements be defined? * Multiple or elements can be defined in one HTML page * Both SVG and CANVAS allow multiple graphics to be defined (drawn) at the same time * Use in actual development * The usage rate of SVG in future work development is not high * SVG images are generally completed by UI designers * Even if SVG is designed by ourselves (Drawing) * There are many websites on the Internet that provide ready-made SVG images * Using JS library

-------------------------------------------------- --------------------------------------------->Change for the sake of life, create for the sake of change.

An in-depth analysis of SVG_html5 tutorial techniques in HTML5

Related articles