Refer to the tutorial

The W3C SVG tutorial

SVG tutorial

MDN SVG tutorial

MDN Tutorial

If there are omissions and mistakes, please give us more advice!!

directory

  • The canvas
  • The shape of
  • The text

The container

<svg>

Container tag. To draw a graph, you need to declare a draw region.

SVG’s coordinate system, starting from the top left corner of the canvas SVG, is positive x to the right and positive Y to the down.

The main properties

  • Width Sets the width of the SVG canvas. The default unit is px. You can set REM, EM, and percentage.
  • Height Sets the height of the SVG canvas. The default unit is PX. You can set REM, EM, and percentage.
  • viewBoxThe viewBox property allows you to specify a given set of graphics stretches to fit a particular container element. So this is how you set it upviewBox="0 0 4 3".If both are set to 0, the element is not displayed.Understand the SVG viewport, viewBox preserveAspectRatio zoom
  • PreserveAspectRatio This property is used in conjunction with the viewBox.

Matters needing attention

  • <svg>The background color cannot passfillTo set, only throughstyle 的 background-colorProperty to set.
  • Shape-dependent elements such asrect,circleThese fill colors can only go throughfillTo set, like this
< the rect fill = "# FFF" > < / the rect > / / or < the rect style = "the fill: # FFF" > < / the rect >Copy the code

<defs>

SVG allows us to define graphic elements that need to be reused later. It is recommended that all reference elements that need to be used again be defined within the DEFS element. Doing so increases the legibility and accessibility of SVG content. Graphic elements defined in defS elements are not rendered directly. You can render these elements anywhere in your viewport using the

element.

/ / from the MDN sample code < SVG width = "80 px" height = "30 px" viewBox = "0 0 80 30" XMLNS = "http://www.w3.org/2000/svg" > < defs > <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg>Copy the code

The main properties

There are no specific primary attributes

<g>

Element G is a container for combining objects. The transformation added to the element G is applied to all of its children. Attributes added to a G element are inherited by all of its children. In addition, the G element can be used to define complex objects that can later be referred to through the

element.

The

tag can be thought of as a grouping, as a container.

The main properties

There are no specific primary attributes

<use>

This tag can refer to elements declared in

.

/ / from the MDN sample code < SVG width = "100%" height = "100%" XMLNS = "http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> .classA { fill:red } </style> <defs> <g id="Port"> <circle style="fill:inherit" r="10"/> </g> </defs> <text y="15">black</text> <use x="50" y="10" xlink:href="#Port" /> <text y="35">red</text> <use x="50" y="30" xlink:href="#Port" class="classA"/> <text y="55">blue</text> <use x="50" y="50" xlink:href="#Port" style="fill:blue"/> </svg>Copy the code

The main properties

  • X is the distance in the x direction
  • Y is the distance in the y direction
  • height
  • width
  • Xlink: URI of the resource referenced by href. Generally, id is used. This attribute is not recommended in SVG 2hrefInstead of

<script>

You can use JS code within this tag

/ / sample from MDN < SVG width = "100%" height = "100%" viewBox = "0 0 100 100" XMLNS = "http://www.w3.org/2000/svg" > < script type="text/javascript"> // <! [CDATA[ function change(evt) { var target = evt.target; var radius = target.getAttribute("r");  if (radius == 15) { radius = 45; } else { radius = 15; } target.setAttribute("r",radius);  } // ]]> </script> <circle cx="50" cy="50" r="45" fill="green" onclick="change(evt)" /> </svg>Copy the code

<style>

You can define styles within this tag

/ / sample from MDN < SVG width = "100%" height = "100%" viewBox = "0 0 100 100" XMLNS = "http://www.w3.org/2000/svg" > < style > / * <! [CDATA[ */ circle { fill: orange; stroke: black; stroke-width: 10px;  // Note that the value of a pixel depend on the viewBox } /* ]]> */ </style> <circle cx="50" cy="50" r="40" /> </svg>Copy the code

The shape of

<rect>

Draw a rectangle

<rect width="100" height="100" fill="#FFC857" x="20" y="20" rx="100" ry="100"/>
Copy the code

The main properties

  • Width Specifies the width of the rectangle. The default resolution unit is PX. Rem, EM, and percentage can be set.
  • Height Height of the rectangle. The default resolution unit is PX. Rem, EM, and percentage can be set.
  • X takes SVG as the canvas, the upper left corner as the origin, and the distance in the X-axis direction. The positive number is the positive X-axis direction, and the negative number is the negative X-axis direction. The default unit is PX.
  • Y takes SVG as the canvas, the upper left corner as the origin, and the distance in the y direction. The positive number is the positive direction of the Y axis, and the negative number is the negative direction of the Y axis. The default unit is PX.
  • Rx is used to define the radius of the fillet along the x axis. The default resolution unit is PX, with an optional percentage.
  • Ry is used to define the radius of fillet in the Y-axis. The default resolution unit is PX, with an optional percentage.

Matters needing attention

  • Rx and RY support animation.
  • When the values of rx and ry are equal to the values of x and y, the circle is drawn.
  • A cylindrical bar chart:
<rect width="80" height="150" fill="#C5283D" x="140" y="20" rx="100" ry="15"></rect>
Copy the code

<ellipse>

Draw an ellipse (circle)

<ellipse cx="350" cy="100" rx="100" ry="80" fill="#255F85"></ellipse>
Copy the code

The main properties

  • Cx defines the x-coordinate of a central point. Unit px or percentage.
  • Cy defines the y-coordinate of a central point. Unit px or percentage.
  • Rx is used to define the radius of the fillet along the x axis. The default resolution unit is PX, with an optional percentage.
  • Ry is used to define the radius of fillet in the Y-axis. The default resolution unit is PX, with an optional percentage.

<circle>

Draw a circle.

<circle cx="600" cy="120" r="100" fill="#481D24"></circle>
Copy the code

The main properties

  • Cx defines the x-coordinate of a central point. Unit px or percentage.
  • Cy defines the y-coordinate of a central point. Unit px or percentage.
  • R defines radius

<line>

Draw a line

<line x1="750" y1="100" x2="850" y2="200" stroke="#A8BCA1" stroke-width="3"></line>
Copy the code

The main properties

  • The x-coordinate of the starting point of the x1 line
  • The y coordinates of the starting point of the line y1
  • The x-coordinate of the end point of the x2 line
  • The y-coordinate of the end of line y2

Matters needing attention

  • <line>The color is not in usefillProperty to set, but instead usestrokeTo set the color.
  • You can also usestyleSo let’s wrap it up. Let’s write it like this
<line x1="750" y1="100" x2="850" y2="200" style="stroke:#A8BCA1; stroke-width:3;" ></line>Copy the code

<polygon>

Defines a closed polygon shape consisting of a group of straight line segments joined end to end. The last point connects to the first point.

<polygon points="20,200 100,300 20,350" fill="#2FE6DE"></polygon>
Copy the code

The main properties

  • pointsIt’s defined to draw a<polyline>Element The sequence of points of an element

<polyline>

Used to create a series of straight lines connecting points. A polyline is typically used to create an open shape where the last point is not connected to the first point.

<polyline points="100,200 200,300 100,400 200,500" stroke="#D741A7" stroke-width="4" fill="#fff"></polyline>
Copy the code

The main properties

  • Points defines the sequence of points used to draw an element element

<path>

The path element is a generic element used to define shapes. All basic shapes can be created using the path element. Use the path element to draw rectangles (rectangular or rounded rectangles), circles, ellipses, folds, polygons, and other shapes such as Bezier curves, cubic curves, and so on.

The main properties

  • D This attribute defines a path

<title>

Each window element or graphic element in an SVG drawing can provide a title descriptive string, which can only be plain text.

Usually the title element must be the first child of its parent element. Note that those compilers only display title as a prompt bubble if title is the first child of its parent element.

<rect x="10" y="10" width="200" height="50" fill="red"><title>this is rect</title></rect>
Copy the code

When the mouse hovers over the rectangle, it bubbles to indicate the contents of the title. Setting the font color for the title style property is invalid.

The main properties

No particular primary attribute

The text

<text>

Defines a graphic consisting of text.

<text x="10" y="20">SVG Text Example</text>
Copy the code

The main properties

  • X is the distance in the x direction.
  • Y is the distance in the y direction.
  • Dx the offset in the x direction.
  • Dy y offset.
  • Anchor text – the anchor text attributes are used to describe the text with the given point alignment aligned (beginning, middle, end), the attribute value: start | middle | | end inherit.
  • TextLength specifies the width of the text will be drawn to the space, equivalent to the size of the region limit text rendering, attribute values: | digital percentage.
  • The lengthAdjust lengthAdjust property controls how the text is stretched to the length defined by the textLength property. Attribute values: spacing | spacingAndGlyphs

<tspan>

Create a child text inside the

tag, similar to
in HTML.

<text x="10" y="20">SVG <tspan>Text</tspan> Example</text>
Copy the code

The main properties

Except that there is no text-anchor attribute, other attributes are consistent with those described in

above.

<textPath>

Draws text along the specified path

// From the MDN example <! -- Use the defS tag to hide the color of the path drawn, for example, if path is red, > <defs> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" /> </defs> <text> <textPath href="#MyPath"> Quick brown fox jumps over the lazy dog. </textPath> </text>Copy the code

The main properties

  • Href Specifies the identifier (usually an ID) corresponding to the path.
  • Path If href is not specified, the corresponding path data needs to be specified.
  • Method the temporarily didn’t understand, attribute values are: align | strench.
  • Side the temporarily didn’t understand, attribute values are: left | right.
  • How far should the start of the startOffset text be offset from the start of the path?
  • TextLength with
  • LengthAdjust with

The gradient

<linearGradient>

Defines a linear gradient for filling or stroke of graphic elements.

/ / from the MDN example < SVG width = "120" height = "120" viewBox = "0 0 120 120" XMLNS = "http://www.w3.org/2000/svg" version = "1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="green"/> <stop offset="95%" stop-color="gold"/> </linearGradient> </defs> <rect fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> </svg>Copy the code

The main properties

  • Values for the gradientUnits attribute: UserSpaceOnUse | objectBoundingBox, this should be to show that the gradient of the benchmark coordinates has who shall prevail, userSpaceOnUse says it has the current user coordinate system, objectBoundingBox said in the boundary of element coordinates, It also transforms in conjunction with gradientTransform.
  • GradientTransform defines gradientshape transformations, using functions such as skewX and Translate. It is estimated that the value of this property should be the value of transform in CSS.
  • x1
  • y1
  • x2
  • y2

X1, y1, x2, y2 is where the gradient starts and ends.

  • SpreadMethod determines how to fill shapes beyond the defined edges of the gradient. Attribute values: pad | reflect | repeat

<stop>

Define the color gradient on the gradient, applied to and

.

The main properties

  • Offset Indicates the offset at the start or end of a color, using percentage
  • Stop-color The color of the gradient at the beginning or end.
  • The opacity of a gradient at the start or end of opacity.

A graphical representation of the main attributes

The sample code

<defs>
  <linearGradient id="MyGradient">
      <stop offset="0%" stop-opacity="1" stop-color="green"/>
      <stop offset="100%" stop-opacity="1" stop-color="red"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="100" height="20"/>
Copy the code
  • gradientUnits

Set it to userSpaceOnUse

Set to: objectBoundingBox (default)

  • spreadMethod

Set to: pad (default)

Note: this should be combined with the x1, x2, y1, y2 coordinates, otherwise it will not work.

Modify the sample code

<defs>
  <linearGradient id="MyGradient" spreadMethod="pad" x1="30%" x2="60%">
      <stop offset="0%" stop-opacity="1" stop-color="green"/>
      <stop offset="100%" stop-opacity="1" stop-color="red"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="100" height="50"/>
Copy the code

Set to: reflect

Set to: repeat

The sample code

Draw a column with a gradient from top to down. often used in bar charts

<defs>
  <linearGradient id="MyGradient" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-opacity="1" stop-color="#8BEDFF"/>
      <stop offset="100%" stop-opacity="1" stop-color="#0F81FF"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="20" height="300"/>
Copy the code

<radialGradient>

Defines a radial gradient to fill or stroke a graphic element. This is understood to be used to define a radial gradient.

This tag also needs to be used in conjunction with the

tag.

<defs>
  <radialGradient id="exampleGradient">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
Copy the code

As can be seen from the diagram. By default, gradients start at the center and work their way out.

The main properties

  • GradientUnits with<liearGradient>Property of the same name.
  • GradientTransform with<liearGradient>Property of the same name.
  • SpreadMethod with<liearGradient>Property of the same name.
  • Cx defines the x-coordinate of a central point.
  • Cy defines the y-coordinate of a central point.
  • R radiating gradient radius.
  • Fx This property defines the X-axis coordinates of the focus of the radial gradient. If the property is not defined, it is assumed to be in the same position as the center point.
  • Fy This attribute defines the y-coordinate of the focal point of the radial gradient. If the property is not defined, it is assumed to be in the same position as the center point.
  • Fr This property defines the radius of the focus of the radial gradient. If this attribute is not defined, the default value is 0%.

Examples of major properties

  • I’m going to change the center, and I’m going to set cx, cy to 20%.
<defs> <radialGradient id="exampleGradient" cx="20%" cy="20%"> <stop offset="10%" stop-color="gold"/> <stop offset="95%"  stop-color="green"/> </radialGradient> </defs> <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>Copy the code

  • Change gradient radius r to 20%
<defs>
  <radialGradient id="exampleGradient" r="20%">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>
Copy the code

  • Set FX fy to 20%
<defs> <radialGradient id="exampleGradient" fx="20%" fy="20%"> <stop offset="10%" stop-color="gold"/> <stop offset="95%"  stop-color="green"/> </radialGradient> </defs> <circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>Copy the code

  • Set the FR to 20%
<defs>
  <radialGradient id="exampleGradient" fr="20%" >
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>
Copy the code

other

<marker>

The marker element defines an arrow or multilateral marker graph drawn on a particular element, element, element, or element.

Developer.mozilla.org/zh-CN/docs/…

<clipPath>

The SVG element

defines a clipping path that can be used as the value of the clip-path attribute of other elements.

The clipping path limits the visible range of the graph. Conceptually, if the graph is outside of the region surrounded by the current clipping path, then the beyond will not be drawn.

Developer.mozilla.org/zh-CN/docs/…