SVG and HTML5SVG in HTML5
* SVG
* Basic Content
* SVG does not belong to HTML5 proprietary content
* HTML5 provides native content about SVG.
* Before HTML5 appeared, there was SVG content.
* SVG is a vector graph.
* The extension of the SVG file is ". svg"
* SVG uses the XML syntax.
* Concept
* SVG is a language that uses XML technology to describe two-dimensional graphics.
* SVG features
* Drawing SVG images can be captured by search engines
* SVG is amplified without degrading the image quality.
* Differences between SVG and Canvas
* SVG
* Resolution independent
* Event binding is supported.
* Large rendering area programs (such as Baidu map)
* Web games cannot be used.
* Canvas
* Dependent resolution
* Event binding is not supported.
* Most Suitable for web games
* Save the image as ". jpg"
* Purpose
* Small icons on the webpage
* Dynamic effects (animation effects) on webpages)
* Use SVG in HTML5
* Use the <svg> </svg> element
* Function-similar to the <canvas> element
* The default size is 300px * 150px.
* Use CSS styles
* To draw a graph using SVG, you must define the <svg> element.
* Drawing Images
* Rectangular Element
<Rect x = "" y = "" width = "" height = "/>
<! DOCTYPE html>
* Circular Elements
<Circle cx = "" cy = "" r = ""/><Body> <svg width = "500px" height = "500px"> <! -- Draw the circle-<circle> * Circular coordinate values of cx and cy-circular * radius of r-circular --> <circle cx = "100" cy = "100" r =" 100 "fill =" pink "/> </svg> </body>
* Elliptical Element
<Ellipse cx = "" cy = "" rx = "" ry = ""><body> <svg width="300px" height="300px"> <ellipse cx="150" cy="150" rx="150" ry="100" /> </svg> </body>
* Line Element
<Line x1 = "" y1 = "" x2 = "" y2 = "/><Body> <! -- <Svg> can an element contain only one Graphic Element or multiple graphic elements? * Multiple graphic elements can be included --> <svg width = "300px" height = "300px"> <line x1 = "10" y1 = "10" x2 = "200" y2 = "200" stroke-width = "10" stroke = "black"/> <line x1 = "200" y1 = "200" x2 = "200" y2 = "10" stroke-width = "10" stroke = "black"/> </svg> </body>
* Line Element
<Polyline points = ""><Body> <svg width = "500px" height = "500px"> <! -- <Polyline> element-line * points-set the start point, break point, and end point * use between x and y ", "separates * use spaces between multiple points to separate the line * by default, the line area (from the start point to the end point) is ), black is provided by default --> <polyline points = "200,200, 10 10,200, 10" stroke-width = "5" stroke = "black" fill = "white"/> </svg> </body>
* Polygon Elements
<Polygon points = ""/><body> <svg width="500px" height="500px"> <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/> </svg> </body>
* Special effect elements
* Gradient-the gradient element is defined in the <defs> element.
* Linear gradient-<linearGradient>
* This element is the starting element.
<LinearGradient x1 = "%" y1 = "%" x2 = "%" y2 = "%">
<Stop offset = "%" stop-color = "color"/>
</LinearGradient><Body> <svg width = "400px" height = "400px"> <! -- Set linear gradient-<linearGradient> * usage-define the gradient in <defs> element * features-baseline x start coordinate values-x1 and y1 * end coordinate values-x2 and y2 * Note * this element is the starting element <linearGradient> </linearGradient> * the values of x1, y1, x2, and y2 are both hundreds of values * define id attribute * to add the set gradient. * use the <stop> element in the drawing element to set the gradient color * offset-set the gradient color position * this value is also a hundred points * stop-color-set the gradient color * stop-opacity-set the transparency of the gradient color --> <defs> <linearGradient id = "mygrd" x1 = "0" y1 = "0" x2 = "100%" y2 = "100% "> <stop offset =" 0 "stop-col Or = "red"/> <stop offset = "50%" stop-color = "green"/> <stop offset = "100%" stop-color = "blue"/> </linearGradient> </defs> <! -- How can I add the above linear gradient to the rectangle below? * Use the fill attribute. The value is url (# id value of the gradient element) --> <rect x = "0" y = "0" width = "400" height = "400" fill = "url (# mygrd) "/> </svg> </body>
* Sector (Ray) gradient-<radialGradient>
* Filter-Gaussian blur
* Use the <filter> element for the filter.
* <FeGaussianBlur> element-Gaussian blur
* In = "SourceGraphic"
* StdDeviation-set the Blur degree<Body> <svg width = "500px" height = "500px"> <! -- How to set a Gaussian blur filter * Definition <defs> </defs> element-filter definition in this element * Definition <filter> </filter> element-represents the SVG filter * Definition gaussian Blur element <feGaussianBlur> * attribute * in = "SourceGraphic"-fixed syntax * stdDeviation-set blur degree * to <filter> element-defined id attribute value * to facilitate addition of elements in the drawing image medium --> <defs> <filter id = "myfilter"> <feGaussianBlur in = "SourceGraphic" stdDeviation = 5/> </filter> </defs> <! -- How to associate the above Gaussian blur with the following elements * use the filter attribute with the value of url (# id) * set the filter of the current image --> <rect x = "100" y = "100" width = "100" height = "100" filter = "url (# myfilter) "fill =" green "/> </svg> </body>
* Note-defined in the <defs> element
* TWO. js
* Basic Content
* JS library Introduction
* Three. js-used to draw 3D images
* Two. js-used to draw two-dimensional images
* Formats supported by two. js
* SVG-Default
* Canvas
* WebGL-used to draw images
* How to use two. js
* Add the two. js file to the HTML page.
* Define a container on the HTML page (<div>)
* In javascript code
* Get the container in the HTML page
* Create a Two object and add it to the container.
New Two (params). appendTo (Element );
* Use the API method provided by two. js to draw
* Use the method provided by two. js to set the image
* Use the update () method to draw
* Create a Two object
* Constructor-new Two (params)
* Params parameter-set the information of the current object
* Type-set the current format (Two. Types. svg)
* Svg-default value
* Canvas
* Webgl
* Width and height-set the width and height
* Fullscreen-set whether to enable full screen
* Boolean value. true indicates full screen.
* Graphical Method
* MakeLine ()-draw a line
* MakeRectangle ()-draw a rectangle
* MakeCircle ()-draw a circle
* MakeEllipse ()-draw an ellipse
* Animation Method
* Update ()-update an animation
* Play ()-add an animation (loop)
* Pause ()-delete an animation
* Set the drawing style.
* When you call the Two object drawing method to draw a graph, the image object is returned.
* Use this graphic object to set relevant property values
* Group operations
* Two. Group
* Animation effect
* Bind (event, callback) method-event binding
* Event-bind event name
* Update-functions of the update () method
* All DOM events can be bound.
* Callback-event processing functions
* Extended content
* Front-end development tools
* Aptana Studio 3-code prompt
* Webstrom-front-end developer artifacts in China
* In actual development
* Multiple use of SVG
* Not distorted
* Searchable
* Page optimization-reduce external links
* <A href = "">
*
* Canvas-HTML drawing
* In runtime, the image format is displayed (.png)
* Cannot be crawled by search engines
* Distortion after amplification
* SVG content
* Large internal capacity
* Static drawing
* Dynamic animation effect
* Dedicated event provision
* There is very little information about SVG on the Internet (no books)
* SVG specifications (W3C English)
* SVG or CANVAS are defined on the HTML page.
* Can I define only one element or multiple elements?
* Multiple <svg> or <canvas> elements can be defined on an HTML page.
* Both SVG and CANVAS allow simultaneous definition (drawing) of multiple images
* Use in actual development
* The usage of SVG in future development is not high
* SVG images are generally completed by the UI Designer.
* SVG is designed (drawn) by ourselves)
* Currently, many websites on the Internet that provide off-the-shelf SVG Images
* Use the JS Library
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
