Recently, I am learning a front-end data visualization D3.js. Its chart drawing is based on SVG. As a rookie, I don’t know what SVG is, so I decided to put D3.js aside and learn about SVG first.
So what is SVG? Baidu Encyclopedia introduced it like this: "SVG is a graphic file format. Its full English name is Scalable Vector Graphics, which means scalable vector graphics . It is based on XML (Extensible Markup Language), developed by the World Wide Web Consortium ( Developed by the W3C) alliance. Strictly speaking, it should be an open standard vector graphics language that allows you to design exciting, high-resolution Web graphics pages. Users can directly use code to describe images, and can use any text The processing tool opens the SVG image, changes part of the code to make the image interactive, and can be inserted into the HTML at any time to view through the browser."
After reading it, I didn’t know what to do, just like hearing words like function and equation when I was a child, because the nouns are too ungrounded, so I was scared before I learned it. Don’t be intimidated by unfamiliar terms. From my self-study experience, SVG is actually very simple. Although it is based on XML, it doesn’t matter if you don’t understand XML. After all, HTML is also a markup language. As long as you have used HTML, you can definitely understand the following Content.
1. Using SVG in HTML
(1) You can directly embed SVG code in HTML
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height: 300px; width: 500px">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
xmlns is a namespace. Those who don't understand XML may not know what it means. It doesn't matter. This parameter is fixed, so just write it down.
Through the above code, a circle can be drawn on the page
(2) Create a separate SVG file and introduce it in HTML
Create an example1.svg file with the following content:
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="black" stroke-width="4" fill="grey" />
<text x="150" y="115" font-size="20" text-anchor="middle" fill="red">SVG NB</text>
</svg>
Then introduce it in HTML through tags:
<iframe src="example1.svg" style="width: 350px; height: 250px"></iframe>
<embed src="example2.svg" type="image/svg+xml" />
<object data="example3.svg" type="image/svg+xml"></object>
These three tags are all applicable to the HTML5 standard and are currently supported by most browsers.
The effect is:
Of course, you can also use the "<a>" tag to make a link to the SVG file
<a href="example1.svg">SVG文件</a>2. Basic shape label
SVG provides some tags to help us quickly draw common shapes.
(1) Rectangle
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>The setting of the style is also very simple, just like the inline style sheet of CSS, and the attribute names are basically the same as when using CSS in HTML, as above. The only difference I have used so far is that the rounded corners of the rectangle are set with the two attributes rx and ry.
It is also possible to remove the style="" and write all in the form of attribute = value, as follows:
<rect width="300" height="100" fill=rgb(0,0,255) stroke-width=1 stroke=rgb(0,0,0)/>(2) Round
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />cx and cy define the position of the center of the circle. If not set, it is (0,0), and r is the radius.
(3) Ellipse
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>The difference between an ellipse and a circle is that an ellipse has a major axis and a minor axis, so there are two attributes rx and ry that represent the lengths of the horizontal and vertical axes respectively
(4) straight line
<line x1="0" y1="0" x2="200" y2="200"/>The straight line is also very simple, just use two sets of (x, y) coordinates to set the start point and end point respectively.
(5) Polyline
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>Polylines are actually not complicated, just define a few more points than straight lines. Note that each group of points is separated by spaces instead of semicolons.
(6) Polygon
A polygon is a little more complicated. It is similar to a polyline, and it also defines some points, but the last point will be connected with the first point to form a closed figure.
The key lies in the fill-rule attribute, which is used to determine whether an area on the canvas belongs to the "inside" of the graphic (the inner area will be filled). Of course, for simple graphics such as triangles or rectangles that do not cross paths, no need Using this attribute, the following example is a five-pointed star.
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
1. The default fill-rule is nonzero. Its rule is to judge whether a point is in the graph, make a ray in any direction from the point, and then detect the intersection of the ray and the graph path. Counting starts from 0, the count increases by 1 when the path passes through the ray from left to right, and the count decreases by 1 when the path passes through the ray from right to left. After the counting result is obtained, if the result is 0, the point is considered to be outside the graph, otherwise it is considered to be inside.
For example, the point P in the figure above and the ray made from point P have passed through the paths BC and EA of the two graphics. Both paths pass through the ray from right to left, so the count is 2, and the point is considered to be inside.
2. The other value of fill-rule is evenodd, which also makes rays, but after finishing the number of intersections with the graphics path, an odd number is considered to be inside, and an even number is considered to be outside. So after changing the fill-rule in the above code to evenodd, it becomes the following effect.
(7) Path
The difference between paths and polylines is that polylines connect points with straight lines, while paths can draw smooth curves through parameters. A path can achieve the effect of a polyline, but a polyline cannot replace a path.
The path is the most complicated of these tags, with a lot of parameters, and when using different parameters, the number of points followed is also different. I want to write a separate article after trying all the different path parameters. Make a detailed introduction to the path, the following is just an introduction. A detailed explanation of the path has been published, and the link is:
<path d="M 0 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
The parameters are as follows: lowercase letters can be used, but the meanings are different. Uppercase means absolute absolute positioning, while lowercase means relative positioning.
- M = moveto start
- L = lineto link
- H = horizontal line to horizontal line
- V = vertical line to vertical line
- C = curveto curve, cubic Bezier curve
- S = smooth curveto is also a curve, cubic Bezier curve
- Q = quadratic Bézier curve quadratic Bezier curve
- T = smooth quadratic Bézier curveto quadratic Bezier curve
- A = elliptical Arc
- Z = closepath close (connect the line from the last point to the starting point)
So the meaning of the above code is to start from (0, 350), use the quadratic Bezier curve to control the (150,-300) control point and finally reach the (300, 0) end point, not closed. (Note that the lowercase q is used, so the (150, -300) and (300, 0) here are relative to the starting point, and are not in the same coordinate system as the starting point (0, 350)). Here is just a rough introduction, the detailed analysis of all the commands in the path will be in the next article.
3. Text label
The basic usage is very simple, just write text between the start and end tags just like HTML.
(1) Subtext
Each <tspan>, like <text>, occupies a separate line and can have its own style. But it must be wrapped in the <text> tag and cannot be used alone.
<text x="10" y="20" style="fill:rgb(0, 174, 255);">峰兄兄:
<tspan x="10" y="45">菜鸡程序员</tspan>
<tspan x="10" y="70">正在努力中</tspan>
</text>
(2) Rotate text
<text x="10" y="45" transform="rotate(90 20,40)">正在努力中</text>The three parameters in rotate are the degrees of clockwise rotation, the distance of vertical and horizontal translation (positive values indicate upward and rightward)
(3) Text along the path
Define a path, and then set it through the textPath tag
<defs>
<path id="path1" d="M 0 100 q 100 80 200 0" stroke="blue" stroke-width="5" fill="none" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">祝你天天开心，都有好心情</textPath>
</text> 
The above is the content of getting started with SVG, followed by a detailed summary of path and gradient color.
write at the end
This is an article I posted on Rare Earth Nuggets. The personal homepage of Rare Earth Nuggets is Brother Feng's personal homepage - News - Nuggets . Both sides will be updated, and the other side will usually be a few days earlier. Welcome everyone to pay attention~
All the pictures in the article are screenshots of the code when I run my own practice. The schematic diagram is also based on the screenshots and edited in the drawing tool. I hope to be recognized by more people and respect my labor. Results, please do not reprint without permission~