当前位置：网站首页>Visualization domain svg

Bitmap ： Zooming in will distort the image, with jagged edges ; It is composed of pixels ; Front-end Canvas Bitmap effect .
Vectorgraph ： Amplification doesn't distort ; Use XML Describe graphics .

On the left is a bitmap , On the right is the vector graph

that SVG What is it? ？ It is one of the formats of vector graph . It is to use XML To describe the graphics .

For beginners SVG On the front end , It can be simply understood as “SVG It's a new set of labels ”.

So you can use CSS To set the style , You can also use JS Yes SVG To operate

2.SVG How to use

1. Usage method

SVG There are many ways to use , I recommend directly in HTML You can use , That is, directly when HTML Label use .

Several methods of use are recorded here ：

Open it directly in the browser
Embedded in HTML in （ recommend ）
CSS Background map （ recommend ）
Use img Tags introduced （ recommend ）
Use iframe Tags introduced （ Not recommended ）
Use embed Tags introduced （ Not recommended ）
Use object Tags introduced （ Not recommended ）

2. SVG Default width and height

stay HTML Use in SVG , Direct use <svg> Labels can be .

<svg></svg>

In not giving <svg> When setting width and height , its The default width is 300px , The default height is 150px . This and <canvas> It's the same .

3. Basic drawing

HTML Most elements of are rectangular by default ,SVG More abundant in shape .

1. rectangular

Rectangle use <rect> label , The default fill color is black , When only width and height are set , The rendered rectangle is a black rectangle .

How to set the style will be explained later （ Like borders 、 Fill color, etc ）, Only the basic properties of rectangle are listed here ：

x: top left corner x Axis coordinates
y: top left corner y Axis coordinates
width: Width
height: Height
rx: Round corners ,x The radius of the axis
ry: Round corners ,y The radius of the axis

eg: Basic （ Set width and height only ）

<svg width="300" height="300" style="border: 1px solid red;">
  <rect width="200" height="100"></rect>
</svg>

Set the rectangle position

adopt x and y You can set the rectangle position

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    x="30"
    y="20"
    width="200"
    height="100"
  >
  </rect>
</svg>

2. Rounded rectangle

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="20"
    ry="40"
  >
  </rect>
</svg>

rx It's settings x The radius of the axis ,ry Set up y The radius of the axis .

rx The maximum value of is half the width of the rectangle ,ry The maximum value of is half the height of the rectangle .

When only setting rx perhaps ry When one of the values , Another attribute will also use the same value .

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="30"
  >
  </rect>
</svg>

here rx and ry All are 30.

`3.`rect Version of the circle

Concept of fillet and CSS Of border-radius It's kind of like , So is there a possibility , use <rect> You can also draw circles ？

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="100"
    height="100"
    rx="50"
  >
  </rect>
</svg>

Just set the width and height to the same , If the fillet is set to half the width, the circle can be realized . This is HTML One of the implementation methods in .

In the same way <rect> Realize ellipse , But in SVG Will not do this . because SVG There are special labels for circles and ellipses .

4. circular circle

Round use <circle> label , The basic attributes are ：

cx: The center of the circle x Axis coordinates
cy: The center of the circle y Axis coordinates
r: radius

<svg width="300" height="300" style="border: 1px solid red;">
  <circle
    cx="60"
    cy="80"
    r="50"
  >
  </circle>
</svg>

5. The ellipse ellipse

Ellipse use <ellipse> label , The basic attributes are ：

cx: The center of the circle x Axis coordinates
cy: The center of the circle y Axis coordinates
rx: x The radius of the axis
ry: y The radius of the axis

<svg width="300" height="300" style="border: 1px solid red;">
  <ellipse
    cx="100"
    cy="40"
    rx="80"
    ry="30"
  >
  </ellipse>
</svg>

<ellipse> and <circle> almost , Just split the radius into x Axis and y The shaft .

5. A straight line line

Straight line use <line> label , The basic attributes are ：

x1: The starting point x coordinate
y1: The starting point y coordinate
x2: The end point x coordinate
y2: The end point y coordinate
stroke: Paint the color

<svg width="300" height="300" style="border: 1px solid red;">
  <line
    x1="30"
    y1="40"
    x2="200"
    y2="180"
    stroke="blue"
  >
  </line>
</svg>

Only x1 and x2 , No, x3 , either y3 .

It should be noted that ,<line> You need to use settings stroke Attribute will have painting effect .

6. Broken line polyline

Use <polyline> You can draw polylines , The basic attributes are ：

points: Point set
stroke: Paint the color
fill: Fill color

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
    fill="none"
  >
  </polyline>
</svg>

points The accepted value is a set of points , A point set is a pair of points representing a coordinate .

In fact, point sets do not need to be separated by commas at all , In the above example, I used commas to separate , It's entirely to make it easy to understand when reading the code . A comma separates one xy coordinate .

Drawing polylines is , I usually will fill Set to none , because fill The default value is black , If not set to none The following effects will occur ：

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
  >
  </polyline>
</svg>

take fill Set to none after , You have to set stroke For a value with color , Otherwise, there will be no rendering effect .

7. polygon polygon

Polygons use <polygon> label , Basic properties and <polyline> almost ：

points: Point set
stroke: Paint the color
fill: Fill color

<polygon> It will close automatically （ Automatically link start and end points ）.

<svg width="300" height="300" style="border: 1px solid red;">
  <polygon points="10 10, 200 80, 230 230"></polygon>
</svg>

8. Straight path path

Actually in SVG in , All basic graphics are <path> Abbreviation . All the data describing the contour is placed in d In the attribute ,d yes data Abbreviation .

d Attributes also include the following main keywords （ Pay attention to case ！）：

M: Starting point coordinates ,moveto It means . Each path must be in M Start .M Pass in x and y coordinate , Separate with commas or spaces .
L: Contour coordinates ,lineto It means .L It's following M hinder . It can also pass in one or more coordinates . uppercase L It's a Absolute position .
l: This is lowercase L, and L It's about the same , but l It's a The relative position .
H: And the last point Y Coordinate equals , yes horizontal lineto It means . It's a Absolute position .
h: and H almost , but h It uses Relative positioning .
V: And the last point X Coordinate equals , yes vertical lineto It means . It's a Absolute position .
v: This is a lowercase v , And upper case V Almost , But lowercase v It is a relative positioning .
Z: Close the current path ,closepath It means . It will draw a straight line back to the starting point of the current sub path .