This article mainly explains some advanced SVG animation effects, such as SVG animation tags, graphics gradients, path animation, line animation, SVG clipping, etc.

For example: path animation

Graphic gradient:

Line animation:

And, the matrix knowledge related to animation, which is now the most important CSS animation, but also the most deficient knowledge point:

The article will start with basic grammar and then work your way up. This paper introduces some basic principles of animation and corresponding mathematical principles. At the end of the article, there is also an introduction to the relevant grammar, which you can refer to when you are not familiar with grammar.

In the previous article, I introduced you to some basic concepts and graphics of SVG. Next we need to know, besides the fact that SVG handles vectors, what else is interesting about SVG that makes it so popular today?

The full version is available on my public account: Front-end Jimmy Jr.

Share Jimmy’s front end road, and introduce the current hot front end technology, such as live broadcasting and VR, regularly

SVG Animation

In SVG, if you want to animate an effect, you can add an animation using CSS, JS, or just using the animate element that comes with SVG.

With CSS, there are two options: directly inline with style, or directly use the relevant animation property, transform.

 <use id="star" class="starStyle" xlink:href="#starDef"
       transform="translate(100, 100)"
       style="fill: #008000; stroke: #008000"/>
Copy the code

However, using custom animate in SVG is mostly SVG’s own, which is more useful. If you want to animate with CSS, it doesn’t matter.

Take a look at SVG Animate DEMO:

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
  <animate
    attributeName="width"
    attributeType="XML"
    from="200" to="20"
    begin="0s" dur="5s"
    fill="freeze" />
</rect>
Copy the code

The animate tag is nested within a given shape. In addition, there is the animateTransform, which is mainly used for animating.

<rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;" > <animateTransform attributeType="XML" attributeName="transform" type="scale" from="1" to="4 2" begin="0s" dur="4s" fill="freeze"/> </rect>Copy the code

In a nutshell:

  • Animate: Equivalent to transition in CSS
  • AnimateTransform: equivalent to CSS transform

There are some technical details that we won’t go into here. Here, I would like to introduce the morph effects in animate.

animate morph

The main effect is to do a gradient inside the shape. As shown in figure:

How does this animation work?

Let’s get straight to the code:

<path fill="#1EB287"> <animate attributeName="d" dur="1440ms" repeatCount="indefinite" keyTimes="0; . 0625; . 208333333; . 3125; . 395833333; . 645833333; . 833333333; 1 "calcMode =" spline "keySplines =" 0,0,1,1; ., 42, 0. 58, 1; . 42,0,1,1; 58, 1, 0, 0,. ., 42, 0. 58, 1; ., 42, 0. 58, 1; .42, 0,0,0 "values="M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,50 100,100 100,100 100,100 100,100 50,100 50,100, 100,100, 100,100, 100,100, 100,100, 100,100, 100,100, 100,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0,0 M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,50 100,100 50,100 50,100 50,100 100,100 0,100 0,100 0,50 0,50 0,0 Z; M 50,0 C 75,25 75,25 100,50 75,75 75,75 50,100 25,75 25,75 0,50 25,25 25,25 50,0 Z; M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z; M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z; M 50,0 C 77.6,0 100,22.4 100,50 100,77.6 77.6,100 50,100 22.4,100, 0 77.6,0 50 0,22.4, 22.4,0, 50,0 Z; M 50,0 C 77.6,0 100,22.4 100,50 100,77.6 77.6,100 50,100 22.4,100, 0 77.6,0 50 0,22.4, 22.4,0, 50,0 Z; M 100,0 C 100,50 100,50 100,100 50,100 50,100 100,100 0,100 0,50 0,50 0,0 50,0 50,0 100,0 Z;" /> </path>Copy the code

It’s a little confusing, isn’t it? But it’s really easy to break it down. KeyTimes, calcMode, keySplines, and values are all used in animate. No hurry. Let’s explain it one by one.

  • KeyTimes: This is actually the same as defined in CSS@keyframesThe same. Define the completion time of each animation with a value between 0 and 1. Format for:value; value.... For example,0; . 0625; . 208333333; . 3125; . 395833333; . 645833333; . 833333333; 1. The percentage of time spent from the first animation to the second animation is 6.25%. Also, keyTimes needs to match the number of frames defined in values.
  • CalcMode: Used to define the specific interpolation model of the animation. The values are:discrete | linear[default] | paced | spline. Please refer toMDN. Let’s focus on spline. This value represents the use of custom Bessel transform curves between each animation. Without special requirements, linear is actually sufficient, so you don’t have to bother to define the followingkeySplinesProperties.
  • KeySplines: This value is used to specify when the animation is executedBessel curve. Use format is through;To separate each value. That is,cubic-bezier(.31,.57,.93,.46)As a group. If keySplines is used, then:keySplines = ".31,.57,.93,.46;". And, of course, the number of Bezier curves inside is zeroThe number of frames for the entire animation is -1.

Values is easy. It is directly combined with the attributeName attribute to set specific values, used between each value; Delimit.

As above, multiple animate elements can be nested within a given element to change both shape and color. Morph is more commonly used for numeric alternation, for example, animation related to the countdown to 10s. That’s the end of Morpah.

Next, let’s look at another very important tag in SVG: animateMotion.

This tag allows the specified element to move around the specified path. So this is very useful for complex paths, because it’s hard to simulate complex transform paths using transform. To see a DEMO

animateMotion

AnimateMotion has roughly the same properties as animate, but it also has its own unique properties such as keyPoints, Rotate, and Path. However, the default attribute of calcMode in AM(animateMotion) changed from linear to bungled.

So let’s go through these properties, but let’s start with the simplest one. First, let’s look at a DEMO:

<g> <rect x="0" y="0" width="30" height="30" style="fill: #ccc;" /> <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;" / > < animateMotion from = "0, 0" to = "60, 30 dur" = "4 s" the fill = "freeze" / > < / a > gCopy the code
  • From, to: Specifies the position of two points. The position parameter is based on the coordinate of the element.
  • Dur: Perform render time
  • Fill: Specifies the fill that stays after the animation ends. There arefreeze 和 removeThe effect. Remove means to return to the beginning of the animation, and freeze means to stay at the end of the animation.

If you want a more complex path, you can specify the path directly using the path attribute. The usage is the same as the D attribute in the path tag.

<rect x="0" y="0" width="30" height="30" style="fill: #ccc;" > <animateMotion path="M50,125 C 100,25 150,225, 200, 125" dur="6s" fill="freeze"/> </rect>Copy the code

Or use the mpath tag to refer to an external path.

<path d="M10,110 A120, 120-45 0,1 110 10 A120, 120-45 0,110 110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/> <circle cx="10" cy="110" r="3" fill="lightgrey" /> <circle cx="110" cy="10" r="3" fill="lightgrey" / > <! -- Red circle which will be moved along the motion path. --> <circle cx="" cy="" r="5" fill="red"> <! -- Define the motion path animation --> <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath"/> </animateMotion> </circle>Copy the code

The animation effect is:

Therefore, generally speaking, when we define the path of AM, we can only use one way to define, otherwise the corresponding overwrite will occur: mpath>path>values>from/to.

Another important concept in AM motion is the Angle of rotation. By default, the Angle of a moving object is determined by its initial Angle with the coordinate axes. Such as:

That might seem a little bit awkward, but can you make the object move perpendicular to the path?

Yes, there are three values to choose from based on the Rotate property value.

  • Auto: moves the object perpendicular to the tangent of the path. However, if your path is a closed curve, you need to pay attention to where you start.

Such as:

  • Auto-reverse: Makes the object perpendicular to the tangent direction of the path and + 180°. So it’s tangent to the auto motion.

  • Number: Moves the object at a fixed Angle of rotation. This is equivalent to using transform: Rotate (deg) for control.

In the animation Settings TAB, there is a simpler – set.

set

This tag is also used to simulate the transition effect. The main difference between animate and animate is that it requires only the specified property of TO and does not require other reference properties, such as from, by, etc. Does it have any special purpose?

Yes, because set applies to all properties, even the related CSS properties in style. So, it’s a good way to describe some non-number attribute values.

<text text-anchor="middle" x="60" y="60" style="visibility: hidden;" > <set attributeName="visibility" attributeType="CSS" to="visible" begin="4.5s" dur="1s" fill="freeze"/> All gone! </text>Copy the code

Matrix animation

The above is a brief introduction to some of the more interesting animations for SVG. Of course, there’s the more important line animation, which we’ll cover later. So here’s a look at the matrix principle, which is very important in all animation. Linear algebra is probably the easiest subject to learn in college, MD… Still remember, the university line generation of the final exam, 100 points of the classmate should be said to be like leek ground, a catch a large (sorry, I failed to join hands with them.

How are matrices used in animation?

To put it simply, each element in the matrix can be equivalent to the coefficient in each factor:

This is also called the three dimensional matrix. That is, it involves computing the x,y, and z axes. So for our planar 2D transformation, what is the matrix going to look like?

It’s easy, just set the Z-axis to a constant forever. In this case, the convention is to just set it to 0, 0, 1.

If you don’t believe me, you can just plug in times times, and you should get the answer. Therefore, in two dimensions, the specific transformation mode is:

Later, we will also carry out related deformation operations according to this formula. How do matrix transformations apply to CSS/SVG?

In CSS, the transform property is used directly:

transform: matrix(a,b,c,d,e,f);
Copy the code

Of course, the same is true in SVG:

<g transform="matrix(1,2,3,4,5,6)"> <line x1="10" y1="20" x2="30" y2="40" style=" width: 10px; stroke: blue;" /> </g>Copy the code

So, the main thing we’re going to focus on is the matrix property. Its format is:

matrix(a,b,c,d,e,f);
Copy the code

Corresponding to our formula above is:

When approaching a Transform, you should be aware that there are a number of fixed animation properties in a Transform:

  • translate()
  • rotate()
  • scale()
  • skew()

In fact, the underlying transformations are still implemented using matrix. Take translate for example.

Format of translate:

translate(dx,dy)
Copy the code

That’s the same thing as moving dx dy along the x/y axis with reference to the current origin. So how do I represent this mapping to a matrix?

Quite simply, it is equivalent to:

matrix(1 0 0 1 dx dy);
Copy the code

Prove it algebraically:

Let’s say I have the matrix of 1 0 0 1 20 30.

The matrix is:

According to, the above expression has:

X = x'*1 + y'*0 + 20 = x' + 20
Y = x'*0 + y'*0 + 30 = y' + 30
Copy the code

So it’s going to be 20 to the right in X, and 30 to the right in Y.

What about the other properties? How does it change?

Yeah, similar. It’s just that the values inside are different:

  • Scale (x,y): scale the x/y axis, matrix expression is matrix(x 0 0 y 0 0).
  • Rotate (θ): matrix(cosθ sinθ -sinθ cosθ 0 0).
  • Skew (θx,θy): x/y axis tension, matrix expression is matrix(1 tanθx tanθy 1 0 0).

Note that all three of the above changes the coordinate system of the original object!! This is important, in other words, each subsequent transformation is based on the result of the previous one.

For details:

For details, please refer to MDN matrix

However, that’s not the point of our use of Matrix, nor its strength. Its advantage lies in its computability, that is, the ability to aggregate complex animations into an expression, and subsequent transformations can be directly based on the current matrix.

Let’s first understand how matrix should be expressed if multiple transformation animations are used together.

** just find the matrix corresponding to our transform animation and multiply. ** For example, first rotate 45°, then zoom in 1.5 times, the transformation animation will be:

The transform: rotate (45 deg) scale (1.5, 1.5);Copy the code

Note that although you define the animation as separate, the animation is performed simultaneously. Why? Because, these two animations can actually be integrated into a transformation matrix:

Also, the position is not changeable. For example, transform: scale(2,2) translate(20px,30px). That is, you zoom in twice, then move 20,30 distances. Notice that the 20,30 that we moved here is relative to the enlarged coordinates, so it’s 40,60 relative to the original coordinates. If you switch positions, transform: translate(20px,30px) scale(2,2). I’m going to move it 20,30, and then double it.

The order relation emphasized above can actually be understood as the matrix does not satisfy the commutative law principle. Because if you do, the outcome is likely to be different.

Advanced use of matrix

The above is just a brief description of the concept of matrices. In practice, matrices can be a real weapon.

Suppose you now have an animation that asks you to move an object from one point to another in a parabolic fashion, then ask for JS/CSS at your choice. At this point, do you feel short of breath, hot head?

Well, matrix is a cure, and it’s a cure-all. However, matrix has a limitation that it can only be used with a linear animation expression. That is, it’s not very good for parabola, elliptic curves, complicated curves like that. So what can be done?

Yes, the idea of differentiation. Each animation can actually be composed of lines within a certain range, so we can split a parabola into several lines. Of course, the more you divide it, the better the fit. Here we’re not going to cross you and, let’s simply divide a parabola into five segments.

As shown in figure:

Then there’s the nitty-gritty. Here, the five straight lines with inclination angles of 45°, 30°, 0°, -45° and -30° are taken successively. The proportion of time allocated for each segment is 20%, 25%, 10%, 25%, 20%. This is mainly used for keyFrame Settings. Now, let’s do some math on how to do this animation.

Now, we know that the distance between the two points is 100px. So if we use the same scale, we have 20px, 25px, 10px, 25px, 20px.

Here, we take 45° inclination Angle as the reference point, so the terminal coordinate is (20,20); . Then, the matrix of this segment is:

// Note that the Y-axis needs to be negative! 1 0 20 0 1 -20 0 0 1Copy the code

The deformation animation in CSS is:

The transform matrix (1,0,0,1,20, 20);Copy the code

Then the second paragraph reads:

1 0 25
0 1 -14.4
0 0 1
Copy the code

Using the matrix multiplication method, then:

 1 0 45
 0 1 -34.4
 0 0 1
Copy the code

The deformation animation is:

The transform matrix (,0,0,1,45, 1-34.4);Copy the code

Do the same for the remaining paragraphs. Finally, the entire Keyframe should be represented as:

@keyframe Parabola{20%{transform: matrix(1,0,0,1,20,-20); ,0,0,1,45 45%} {the transform matrix (1, 34.4); }... }Copy the code

This is pretty much the entire animation. Of course, the matrix is not limited to these animations, with a high degree of customization and flexibility, it is often used for rebound, bounce and other animations. If you are interested, you can also explain this kind of animation briefly.

Finally, let’s take a look at the important line animations in SVG.

Line animation

Line animations in SVG are often used in splash screens. Such as:

Or, some cool logos like AllowTeam:

Seeing these cool effects, have you been tempted to learn to see if you can do it so well?

OK, now let’s formally introduce line animation. In SVG, the longest line tag used is Path. I have already made an introduction in the previous article, so I will not repeat it here.

The specific changes are related to the stroke properties :(the following properties can be used directly in CSS!)

  • Stroke * : Defines the color of the stroke. Such as:stroke="green"
  • Stroke-dasharray * : Defines the length of dash and gap. It is mainly through use.To separateThe solid line 和 intervalThe value of the. Such as:stroke-dasharray="5, 5"Represents that the line is repeated in a pattern of 5 solid lines and 5 intervals. The diagram below:

Zoom in:

In addition, stroke-Dasharray is not limited to setting only two values, remember that it itself means setting the minimum repeating unit, i.e.,dash,gap,dash,gap… . For example, I define stroke-dasharray=”15, 10,5 “which is equivalent to [15,10,5] as a paragraph. There are:

Zoom in and see:

  • Stroke-dashoffset *: Sets the position where dasharray defines the dash line to start. Values can benumber || percentage. Percentage is the viewport relative to SVG. Movement of lines is usually achieved with dasharray.
  • Stroke-linecap: The end style of a line.
  • Stroke-linejoin: Style of line connection
  • Stroke-miterlimit: A more complicated concept, if we just draw some generic line segments, use the linejoin above. You can use this attribute to define things that require more edges and corners. Its value, in fact, is the Angle length is wider than the upper line:

And when you think about it, let’s say that width is 1. Now the ratio is 2. So miter is equal to 2. So the miter above 2 is going to be cut off. You can refer to:

It is mainly used in conjunction with linejoin. Because the default value of lineJoin is miter. Therefore, the tag attribute is used by default. It defaults to 4. The rest of us can go down to practice. For details, please refer to miter

  • Stoke-opacity: opacity of a line segment
  • Stroke-width: width of the line.

OK, now that we’ve covered all the stroke attributes for path, we’re ready to start writing code to make lines move. In a nutshell, it’s done by stroke-Dashoffset and stroke-dasharray. The whole animation can be divided into two processes:

  • Use Dasharray to hide the solid line part and make the blank line length. Then, increase the solid line portion to the full length. Such as:Dasharray: 0100 0intoDasharray: 1000100 0.
  • At the same time, dashoffset is used to move the newly added solid line, resulting in the effect of line segment movement. There are:dashoffset:0todashoffset:1000.

However, we’re not going to use Path for complex animations here, mainly because we don’t have any SVG generation tools at hand. So, let’s do it with Text here (because it’s really easy to do).

Here, first with the iv-web text to do animation.

Let me show you the final result:

So how does this animation work?

Here, I mainly introduce CSS related, SVG is a Text I directly paste code:

<svg viewBox="0 0 1320 300"> <! -- Symbol --> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em"> IV-WEB </text> </symbol> <! -- Duplicate symbols --> <use xlink:href="#s-text" class="text" ></use> <use xlink:href="#s-text" class="text" ></use> <use xlink:href="#s-text" class="text" ></use> </svg>Copy the code

The above is done by creating a centered font and then using 3 text overlaps. Let’s talk about CSS. First of all, we created the effect from scratch, so we need to use Dasharray to make the gap big enough. I’m just going to take 300.

stroke-dasharray: 0 300;
Copy the code

Then, using the nTH-Child selector, give each text a different color value:

.text:nth-child(3n + 1) {
  stroke: #F60A0A;
}
.text:nth-child(3n + 2) {
  stroke: #F2FF14;
}

.text:nth-child(3n + 3) {
  stroke: #FB9505;
}
Copy the code

Here’s the point. At this point, the starting points of the three texts coincide. I now want them not to overlap exactly at runtime, but I also want their lines to scroll. Without further ado, let’s get straight to the code:

@keyframes stroke { 100% { stroke-dashoffset: 1000; stroke-dasharray: 80 160; } } @keyframes stroke1 { 100% { stroke-dashoffset: 1080; stroke-dasharray: 80 160; } } @keyframes stroke2 { 100% { stroke-dashoffset: 1160; stroke-dasharray: 80 160; }}Copy the code

This is the animation used for the three different texts above. Dashoffet is 0 to 1000. This completes the purpose of scrolling. At the same time, in order to make the fonts do not overlap, I also need to add different spacing distances on the dashoffset of the corresponding fonts. For example, the first font offset is 1000. So the second font, I need to add the length of the previous font dash, which is 80. So the second font becomes 1080. So the third one is plus the dash length of the first two, which is 1160.

This is the general process, details can be viewed: IVWEB line animation.

Here is another exercise for you, how to achieve wireless continuous segmented animation?

The specific effect is shown as follows:

Here’s a hint:

Overlap multiple characters with different offset and array values. The end position of the animation is usually a gap + Dash period.

We’ll see how this article is received, and then we’ll decide whether to write a sequel explaining the principles of the assignment.

SVG text

To define text in SVG, use the text tag directly. Regarding the text, generally speaking, the point that needs to pay attention to is then, the text arrangement, spacing and so on. All of this can be controlled directly using CSS. However, there are a few special attributes that need to be mentioned here.

text-anchor

Used to define the positioning relationship between the reference point and the actual character. Format for:

  • text-anchor: start | middle | end | inherit

Let’s get straight to the code:

<! -- Anchors in action --> <text text-anchor="start" x="60" y="40">A</text> <text text-anchor="middle" x="60" y="75">A</text> <text text-anchor="end" x="60" y="110">A</text>Copy the code

The first A, which refers to the point (60,40), is defined as start, so the reference point should precede the character.

The same goes for the other two:

tspan

Now, suppose we want to add some special character effects to the text, such as italics, bold, etc. Since text tags cannot be nested, tSPAN tags are proposed to solve this pain point. It’s just a text tag that you can nest.

<text x="10" y="30" style="font-size:12pt;" > Switch among <tspan style="font-style:italic">italic</tspan>, normal, and <tspan style="font-weight:bold">bold</tspan> text. </text>Copy the code

Tspan also allows you to customize your own attributes. I’m not going to go into detail here on TSPAN.

Show text in Path

Text can be horizontal or vertical. Is there any way to let the text according to a certain path arbitrary emissions?

Yes, you can use the textPath tag here to define the specific reference path.

<path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke: gray; fill: none;" /> <text> <textPath xlink:href="#sharp-corner"> Making a quick turn </textPath> </text>Copy the code

As shown in figure:

I won’t go into the details here.

Clip

In the DOM, if you want to show part of an image, or show part of an image in a certain shape, you usually do this with a Cover div. However, DOM is inherently flawed when it comes to irregular graphics (clip-path in CSS can do this, but it’s not very compatible). In SVG, the clipPath tag is provided, allowing us to customize the scope and shape of the cropped image.

ClipPath can be connected to any graphics, such as path,rect and even text. You can specify clip-path in the style or use the clip-path attribute.

<defs> <clipPath id="textClip"> <text id="text1" x="20" y="20" transform="rotate(60)" style="font-family: 'Liberation Sans'; font-size: 48pt; stroke: black; fill: none;" > CLIP </text> </clipPath> </defs> <use transform="translate(100, 0)" xlink:href="#shapes" style="clip-path: url(#textClip);" /> <use transform="translate(100, 0)" xlink:href="#shapes" clip-path="url(#textClip);" />Copy the code

Or, if we want to draw a clipping region of a circle:

<defs> <clipPath ID ="circularPath" clipPathUnits="objectBoundingBox"> <circle Cx ="0.5" cy="0.5" r="0.5"/> </clipPath> </defs> <use xlink:href="#shapes" style="clip-path: url(#circularPath);" />Copy the code

Appendix Reference Label

g

Grouping labels should come first, unsurprisingly, as they are the most common and basic labels used in drawing graphics. The previous article is also mainly introduced, here to make a supplement.

Each group tag has an ID attribute that uniquely identifies the group. Why?

Because we can use the ID tag later to add animations, reuse the group, and so on.

<g id="demo" stroke="green" fill="white" stroke-width="5">
     <circle cx="25" cy="25" r="15"/>
     <circle cx="40" cy="25" r="15"/>
     <circle cx="55" cy="25" r="15"/>
     <circle cx="70" cy="25" r="15"/>
   </g>
Copy the code

Each group can contain some description tag, such as DESC. These descriptions will not be rendered.

<g id="demo" stroke="green" fill="white" stroke-width="5">
    <desc>Just Demo</desc>
     <circle cx="25" cy="25" r="15"/>
   </g>
Copy the code

use

This tag is used together with the G tag to reuse the STYLE of the G group.

<g id="Port">
      <circle style="fill: inherit;" r="10"/>
</g>
<use x="50" y="30" xlink:href="#Port" class="classA"/>
Copy the code

Use the xlink:href to specify the group id, and then specify the location of the copy via the x and y attributes. There is a limitation, however, that the style attribute of the use tag does not override the point’s original group style. Also, sometimes we just want to use some template, that is, the graphics are not parsed, only the code exists. At this point, you need to use DEFS to wrap.

defs

Used to save some code so it won’t be parsed by the browser. And the groups can be overridden by the style of the use attribute.

<defs> <g id="Port"> <circle style="fill: inherit;" r="10"/> </g> </defs> <use x="50" y="50" xlink:href="#Port" style="fill: blue;" />Copy the code

symbol

This tag is similar to the G tag in that it is used for grouping. However, it has the advantage of not being rendered by the browser. Isn’t it the same as DEFS?

Yeah, exactly. Defs, however, is the official recommendation, a tag created to wrap some template SVG code to increase readability. And symbol is stored as a template. It can customize child viewBoxes and preserveAspectRatio independently of SVG’s viewbox.

<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8"
      stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8"
      stroke="green" fill="white"/>
</symbol>

<use href="#sym01"
     x="0" y="0" width="100" height="50"/>
Copy the code

This template is also done using the use tag.

image

Since use can reuse SVG code, can PNG/JPG images already drawn be reused in SVG?

In this case, you need the image tag. It can be used to load external PNG and JPEG images, note that the official rule is the first two, other images are not supported official reply. That is, if you use GIF images, there is no guarantee that they will work on all browsers.

<image xlink:href="kwanghwamun.jpg"
  x="72" y="92"
  width="160" height="120"/>
</svg>
Copy the code

Also, the image tag has the effect of a custom preserveAspectRatio.

  • X: Define the horizontal position
  • Y: Define the vertical position
  • Width: The rendering width of the image.
  • Height: The height of the image to render.
  • PreserveAspectRatio: Controls the zoom in and out of an image

marker

Marker is generally used to mark the beginning and end of arrows or line segments.

<defs> <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto"> <path D ="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <polyline points="10,90 50,80 90,20" fill="none" stroke="black" stroke-width="2" marker-end="url(#Triangle)" />Copy the code

As shown in figure:

Here we only need to know, because in the actual drawing time, direct use of related tools to generate more convenient.

a

The A tag here is similar to the hyperlink A tag we use directly in HTML. It’s also used to define an outer chain.

<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG"
      target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">SVG on MDN</text>
  </a>
Copy the code

For more content, you can follow my public account: Front-end Little Jimmy.

Share Jimmy’s front end road, and introduce the current hot front end technology, such as live broadcasting and VR, regularly

The original link: www.villianhr.com/2017/05/01/…