SVG drawing function: svg realizes drawing a flower (with code)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

不言

Aug 08, 2018 am 11:10 AM

html

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

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>

Copy after login

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 tag: is supported by all major browsers and allows the use of scripts

Comments: When embedded in an HTML page Using the tag when working with SVG is recommended by Adobe SVG Viewer! However, if you need to create valid XHTML, you cannot use . There is no 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/" />

Copy after login

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

Copy after login

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

3)iframe tag: (recommended)

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

Copy after login

3. SVG Shape

1. Rectangle

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

Copy after login

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

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

Copy after login

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

5. Polygon

6. Polyline

7. Path

小花’s code

flower.svg

<?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="90" cy="90" r="30" fill="red" />

    <circle cx="150" cy="90" r="30" fill="yellow" />

    <circle cx="120" cy="60" r="30" fill="blue" />

    <circle cx="120" cy="120" r="30" fill="green" />
    <circle cx="120" cy="90" r="15" fill="pink"/>

    <line x1="120" y1="150" x2="120" y2="250"
    style="stroke:rgb(100,55,69);stroke-width:2"/>

    <ellipse cx="90" cy="190" rx="40" ry="10"
             style="fill:lime"/>
    <ellipse cx="150" cy="225" rx="40" ry="10"
             style="fill:lime"/>
</svg>

Copy after login

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="flower.svg" width="100%" height="600" style="padding: 5px">
</iframe>
</body>
</html>

Copy after login

Rendering