SVG drawing function: svg realizes drawing a flower (with code)

The content of this article is about the SVG drawing function: svg realizes drawing a flower (with code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

An important difference between the 5ba626b379994d53f7acf72a64f9b697 markup and SVG and VML is that 5ba626b379994d53f7acf72a64f9b697 has a JavaScript-based drawing API, while SVG and VML use an XML document to describe drawing.

1. Create a XXX.svg file (this file creates a red circle)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

SVG is written in XML and Save as .svg file. The .svg file must be referenced in the .html file

## 2. svg in HTML

1) Use the d8e2720730be5ddc9c2a3782839e8eb6 tag: is supported by all major browsers and allows the use of scripts

Comments: When embedded in an HTML page Using the d8e2720730be5ddc9c2a3782839e8eb6 tag when working with SVG is recommended by Adobe SVG Viewer! However, if you need to create valid XHTML, you cannot use d8e2720730be5ddc9c2a3782839e8eb6. There is no d8e2720730be5ddc9c2a3782839e8eb6 tag in any HTML specification.

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage: Point to the url to download the plug-in

2) Use the object tag: the standard tag of html4, which is supported by all newer browsers and does not allow the use of scripts

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

codebase: Point to the url to download the plug-in

3)iframe tag: (recommended)

<iframe src="rect.svg" width="300" height="100">
</iframe>

3. SVG Shape

1. Rectangle09cbcf01dd0387af37ac9f1e1f2ac4a1

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

style attribute is used to define CSS properties

The stroke-width property defines the width of the rectangular border

The stroke property defines the color of the rectangular border

2, circle30de22e41cb8eb8fbfdc1f091d85e4be

3, ellipse< ;ellipse>

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

The ellipse here has only one point (the mathematical ellipse usually has two foci)

cx attribute defines the x coordinate of the point

cy attribute Define the y coordinate of the point

rx attribute defines the horizontal radius (half of the line passing through the two foci)

ry attribute defines the vertical radius

4. Lineea393b0e5d0751a6e41e344e418636e0

6. Polylinece803ba1a4290bddb3ba9c6f57d4c9b4

7. Path98953a78f52873edae60a617ec082494

ine242b11cb757be7b13b0cc4eea440d91 element in svg and introduction to marker attribute

How to implement svg Coordinate system transformation (with code)

The above is the detailed content of SVG drawing function: svg realizes drawing a flower (with code). For more information, please follow other related articles on the PHP Chinese website!