Home > Web Front-end > H5 Tutorial > body text

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

不言
Release: 2018-08-08 11:10:41
Original
4147 people have browsed it

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 markup and SVG and VML is that 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>
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

in

小花’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

Although it is a bit uglier, it is still a flower overall! Heehee

Generally speaking, svg is used to draw pictures, and you can also overlay various graphics to form your own pictures

Recommended related articles:

HTML tag: Summary of usage of img tag

Use of 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!