Scalable vector images

Simple understanding

Used to describe two-dimensional vector graphics, xmL-based markup language.

What is vector graphics

The graphics described by lines and curves are composed of some points, lines, rectangles, polygons, circles and curves, etc., which are calculated by mathematical formulas and have the characteristics of editing without losing truth.

advantage

  1. Elegant and concise rendering of graphics of different sizes.
  2. It can work seamlessly with CSS, DOM, JS and other web standards.
  3. You can search, index, script, compress.
  4. You can edit using a text editor or a graphic editor.
  5. Unlimited amplification without distortion, without degrading quality.

A profound

Define several common graphics: circle, rectangle, straight line or curve and other complex graphics, support gradient, rotation, animation, filter and other effects.

SVG root element and other graphics elements, group element G, elements and attributes must be written strictly in specification and case sensitive.

Draw rectangle, circle, text

Simple example:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="50" height="50" fill="rgba(0,0,0,.6)"></rect>
    <circle cx="100" cy="250" r="50" fill="rgba(0,0,0,.7)"></circle>
    <text x="50" y="150" font-size="24" fill="# 000">hello , SVG </text>
</svg>
Copy the code

  • xmlnsFor a space declaration, there must be a binding value ofhttp://www.w3.org/2000/svg
  • rect– rectangles,circle– round,text– text;fillProperty is the color value of the fill
  • x\y\width\hegihtBy default, the upper left corner is the starting point(0, 0)

Can be used directly in HTML

It can also be embedded by object element or iframe

<object data="icon.svg" type="image/svg+xml">
  
</object>
Copy the code

Can be dynamically created through JS and injected into HTML.

Basic Graphic description

All complex graphics are separable and consist of basic graphics elements. By mastering the basic graphics composition, more complex graphics elements can be created.

Examples have shown the basic rectangle, circle, text drawing. The graphic elements and attributes are described in detail below.

Rect –rect
  • x– the top left corner
  • yThe top right-hand corner –
  • widthWidth –
  • height– highly
  • rx– The radius of the fillet in the x direction
  • ry– The radius of the fillet in the y direction
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="50" width="50" height="50" fill="rgba(0,0,0,.6)"></rect>
    <rect x="150" y="50" width="50" height="50" rx="10" ry="10" fill="rgba(0,0,0,.6)"></rect>
</svg>
Copy the code

If rx\ry Settings are the same, then only rx or ry can be set

Round –circle
  • r– round radius
  • cx– The circular x position
  • cy– The position of circle Y
Oval –ellipse
  • rx-Radius x of the ellipse
  • ry-Radius y of the ellipse
  • cx– X position at the center of the ellipse
  • cy– The y position at the center of the ellipse
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="250" r="50" fill="rgba(0,0,0,.7)"></circle>
    <ellipse cx="300" cy="250" rx="100" ry="40" fill="rgba(0,0,0,.7)"/>
</svg>
Copy the code

Line –line
  • x1-Starting position x
  • y1-Starting position y
  • x2-Terminal x position
  • y2– End point y
Line –polyline
  • points– Dot set number column, blank partition number; Comma, newline, space separating point. Example:2, 3, 23, 3,1, 2
<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="350" x2="150" y2="400" stroke="Rgba (0,0,0.6)" stroke-width="2"/>
    <polyline points="180 350,500 350,500 450,180 450,180 350" fill="transparent" stroke="Rgba (0,0,0.6)" stroke-width="2"/>
</svg>
Copy the code

Polyline draws the rectangle. Other attributes such as stroke \ strok-width define the color and the width of the drawing

Poly –polygon
  • points– A column of dots, separated by whitespace and separated by commas. Example:2, 3, 23, 3,1, 2

Unlike polylines, they automatically merge, meaning that the last point is connected back to the first point.

<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="350" x2="150" y2="400" stroke="Rgba (0,0,0.6)" stroke-width="2"/>
    <! -- <polyline points="180 350,500 350,500 450,180 450,180 350" fill=" height "stroke="rgba(0,0,0.6)" stroke-width="2"/> -->
    <polygon points="180 350,500 350,500 450,180 450" fill="transparent" stroke="Rgba (0,0,0.6)" stroke-width="2"/>
</svg>
Copy the code

You can see that the last point in the points set doesn’t need a starting point.

Path –path
  • d– Point set number column, is aCommand + ParameterA collection of sequences.

Can draw any graph, including rectangle, circle, ellipse, polyline, polygon, Bessel curve, conic curve, etc.

There are many commands available for drawing these graphs to indicate the intent of drawing them. These commands are uppercase for absolute positioning and lowercase for relative positioning.

A straight line drawn
  • M\mMove to a certain position
  • L\lDraws a line from the current position to the specified point.
    • H\hThis is how far it moves in the X-axis, and it has only one parameter.
    • V\vRepresents the distance traveled on the y axis, with only one parameter.

Using the command above, draw a rectangle:

To explain: Move starting point to (50,100) – Move horizontal x to 100(width 50) – Move vertical to 700(height 100) – Move Horizontal to 50 – Draw line (50,600). Closed starting point.

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M 50 600 H 100 V 700 H 50 L 50 600" />
</svg>
Copy the code

The closing of waypoint can be simplified by command:

  • Z\zA closed path
<svg xmlns="http://www.w3.org/2000/svg">
    <! -- <path d="M 50 600 H 100 V 700 H 50 L 50 600" /> -->
         <path d="M 50 600 H 100 V 700 H 50 Z" />
</svg>
Copy the code

The uppercase instruction, used above, is absolute positioning, that is, drawing relative to the origin (0,0). By relative positioning, lowercase commands are used to simplify the calculation.

<svg xmlns="http://www.w3.org/2000/svg">    
    <! -- <path d="M 50 600 H 100 V 700 H 50 L 50 600" /> -->    
    <! -- <path d="M 50 600 H 100 V 700 H 50 Z" /> -->         
    <path d="M 50 600 h 50 v 100 h -50 z" />
</svg>
Copy the code
Curve drawing

There are three commands for drawing smooth curves, two for bezier curves and one for curves.

  • C\cTo create a cubic Bezier curve C, defining a point and two control points.
<svg xmlns="http://www.w3.org/2000/svg">    
    <path d="M 700 50 c 10 150,150 250,120 50" fill="none" stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

Remove fill=”none”, use draw stroke=”rgba(0,0,0,.6)”, use lowercase relative position, simplify point coordinate operation.

If you need to link multiple Bezier curves, use the following command:

  • S\s, the previous point is the control point, keeping the slope the same,The argument is two points.finish in the direction of the second point to the end point.
<svg xmlns="http://www.w3.org/2000/svg">    
    <path d="M 700 50 c 10 150,150 250,120 50 s 140 100,200 50" 
        fill="none" 
        stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

If S is not preceded by C or S, a curve is drawn for starting at the current point. Achieve the bezier curve drawing effect

<svg xmlns="http://www.w3.org/2000/svg">    
    <! -- <path d="M 700 50 c 10 150,150 250,120 50 s 140 100,200 50" fill="none" stroke="rgba(0,0,0,.6)" /> -->    
    <path d="M 700 50 s 150 250,120 50" fill="none" stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

  • Q\sTo draw the quadratic Bezier curve Q, only one control point and the endpoint coordinates are needed.
<svg xmlns="http://www.w3.org/2000/svg">    
    <! -- <path d="M 700 50 c 10 150,150 250,120 50 s 140 100,200 50" fill="none" stroke="rgba(0,0,0,.6)" /> -->    
    <path d="M 700 50 s 150 250,120 50" fill="none" stroke="rgba(0,0,0,.6)" />    
    <path d="M 700 200 q 150 250,120 50" fill="none" stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

You get the same curve as in the example above.

  • T\TThe extension command of a conic, through the previous control point, can define only the end point and draw the curve

The T command must be preceded by the Q or T command. If used alone, it will draw a straight line.

<svg xmlns="http://www.w3.org/2000/svg">    
    <! -- <path d="M 700 200 q 150 250,120 50" fill="none" stroke="rgba(0,0,0,.6)" /> -->    
    <path d="M 700 450 q 150 250,120 50 t 200 50" fill="none" stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

By looking at several renderings, you can see the radian difference between the beginning and end of the cubic and quadratic Bezier curves.

arc
  • A\aDraw the arc,

a rx ry x-axis-rotation large-arc-flag sweep-flag x y

Parameter description:

  1. rx ryX radius, y radius
  2. x-axis-rotationThe Angle of rotation of the arc.
  3. large-arc-flagAngle size, 0 means small Angle less than 180 degrees; 1 means a large Angle greater than 180 degrees;
  4. sweep-flagRepresents the arc direction, 0 represents counterclockwise arc; 1 is to draw the arc clockwise;
  5. x y The end of the arc.
<svg xmlns="http://www.w3.org/2000/svg">    
    <path d="M 1000 50 a 10 40,90,0,1,100 100" fill="none" stroke="rgba(0,0,0,.6)" />
</svg>
Copy the code

Note: position (1000,50) – take x radius of 10,y radius of 40 – rotate 90 degrees clockwise – end point of (100,100) arc.

However, the value of the Angle size large-arc flag has been measured for many times, but no effect has been set.

Here is the full graph of the above tests:

Other Label Description

There are also element tags to aid design.

defs

  • Define graphic elements that need to be reused, used elsewhereuseElement rendering.
  • You can define stylesstyle
  • Define animation, gradient elements.
  • Define the scriptscript
  • .

use

The target node can be retrieved, replicated and presented elsewhere.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">		
    <path id="path" d="M 250 50 c 10 10,25 225,180 -10" fill="rgba(0,0,0,.5)" />
    <use xlink:href="#path" x="100" y="0" />
</svg>
Copy the code

pattern

Pattern templates, defined in DEFS, can be filled or stroked using fill or stroke.

  • x\y– Define the starting position.
  • width\height– Defines the size of the parent element of the current template site
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>        
        <pattern id="pattern" x="0" y="10" width="4" height="Three.">            
            <path d="m 10 10 c 10 10,25 225,180 -10 z" fill="red" /> 
        </pattern>    
     </defs>    
     <rect x="550" y="50" width="200" 
         height="100" 
         fill="url(#pattern)" 
         stroke="rgba(0,0,0,.5)" 
         stroke-width="1" />
</svg>
Copy the code

g

A container for composite objects. Transformations added to the g element are applied to all child elements.

desc

Provide a descriptive string for each element. Improves accessibility. Elements are not shown as part of the view when rendered.

animate

Animates an element, defining that an attribute of the element changes over a specified time.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   		
    <rect x="550" y="200" width="200" height="100" fill="none" stroke="rgba(0,0,0,.5)">        
       <animate attributeName="rx" values="0; 40; 0" dur="5s" repeatCount="indefinite" />    
    </rect>
</svg>
Copy the code

Feel animation is still quite fun, or more natural silky. You can animate some complex graphics.

script

Javascript to handle DOM elements such as click and mouse events.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <script type="text/javascript">
        / / 
       
        function change(evt) {
            var target = evt.target;
            var radius = target.getAttribute("r");

            // The obtained radius data is inserted into the belong text for display
            document.querySelector("#text").innerHTML = radius;
        }
        / /]] >
    </script>
    <text id="text" x="500" y="300" fill="# 000">hello</text>
    <circle cx="550" cy="400" r="45" fill="green" onclick="change(evt)">
        <animate attributeName="r" values="45; 50; 45" dur="5s" repeatCount="indefinite" />
    </circle>
</svg>
Copy the code

Element attribute Description

Set style, etc., including color, width, height, etc.

You can set the attributes of an element directly, and the values need to be enclosed in quotes.

Reference properties –xlink:href

Elements that can already be defined, including text, animations, boilerplate, gradients, and so on.

References must be added to the namespace XMLNS :xlink:

<linearGradient id="linear-copy-reflect" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#radial-copy" />
Copy the code

You can also add it directly to the SVG element without having to import it every time.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
Copy the code

Viewbox – Defines container scaling

  • x\y– Define position coordinates.
  • width \ height– Define width and height, and do not display elements if they are 0 or less.

color

  • fill– fill color
  • stroke– Draw the line color
  • fill-opacity– Fill transparency
  • stroke-opacity– Draw color transparency

A border

  • stroke-width– Border width
  • stroke-linecap– Controls the end shape of the border
    • butt– straight
    • square– Is also a straight edge, different from the actual path range, stroke-width.
    • round– Rounded corners
<svg xmlns="http://www.w3.org/2000/svg">    
    <line x1="1000" y1="200" x2="1100" y2="200" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-linecap="butt" />    
    <line x1="1000" y1="250" x2="1100" y2="250" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-linecap="square" />    
    <line x1="1000" y1="300" x2="1100" y2="300" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-linecap="round" />
</svg>
Copy the code

  • stroke-linejoin– Controls the connection mode between two line segments.
    • miter– Square, forming sharp corners.
    • round– the rounded
    • bevel– diagonally.
<svg xmlns="http://www.w3.org/2000/svg">    
    <polyline points="1000 350110 0350110 450" fill="none" stroke="Rgba (0,0,0.6)" stroke-width="20" stroke-linejoin="miter"/>    
    <polyline points="1200 350130 0350130 450" fill="none" stroke="Rgba (0,0,0.6)" stroke-width="20" stroke-linejoin="round"/>    
    <polyline points="1400 350150 0350150 450" fill="none" stroke="Rgba (0,0,0.6)" stroke-width="20" stroke-linejoin="bevel"/>
</svg>
Copy the code

  • Stroke-dasharray – represents a dashed line. The arguments are sequences of numbers and must be separated by commas. Such as: 4 and 6

    When defining three sets of numbers, create dotted lines to connect the edges repeatedly in a circular pattern. == fill – blank fill – blank fill – blank ==

<svg xmlns="http://www.w3.org/2000/svg">    
    <line x1="1100" y1="500" x2="1300" y2="500" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-dasharray="5" />    
    <line x1="1100" y1="550" x2="1300" y2="550" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-dasharray="5, 10" />    
    <line x1="1100" y1="600" x2="1300" y2="600" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-dasharray="Five,10,5" />    
    <line x1="1100" y1="650" x2="1300" y2="650" stroke="rgba(0,0,0,.6)" stroke-width="10" stroke-dasharray="Five,10,5,5" />
</svg>
Copy the code

  • fill-rule– Defines how to color overlapping areas of graphics.
  • stroke-miterlimit– Defines when to draw or not draw the miter effect of the border connection.
  • stroke-dashoffset– Define where the dotted line begins.

Text attributes

You can also use fill to color text within text; Stroke gives the text a stroke

  • text-anchor– Defines the direction of the text. Optional values arestart\middle\end\inherit
  • Text-weight, font-family, font-family, style, font-size, variant, font-size stretch, font-size, font-size adjust, Kerning, letter-spacing, word-spac Ing, text decoration
tspan

The part of the markup text, which must be a word element of text or tSPAN.

  • x\y– Sets absolute positioning coordinates, including a sequence of numbers, applied to each character at a time.
  • dx\dy– Offset, which contains a sequence of values that accumulate each offset.
  • rotate– Define the rotation Angle. This can be a sequence,
  • textLength– The calculated length of the string.
<svg xmlns="http://www.w3.org/2000/svg">     
    <text x="250" y="20" font-size="16" fill="# 000">        
        hello ,        
        <tspan>SVG</tspan>    
    </text>    
    <text x="250" y="50" font-size="16" fill="# 000">       
        hello ,        
        <tspan x="300320340">SVG</tspan>    
    </text>    
    <text x="250" y="80" font-size="16" fill="# 000">        
        hello ,        
        <tspan dx="20, 20">SVG</tspan>   
    </text>    
    <text x="250" y="110" font-size="16" fill="# 000">       
        hello ,        
        <tspan dx="0,10,10" rotate="30,90,0">SVG</tspan>   
    </text>
</svg>
Copy the code

tref

Use the xlink:href attribute to point to an element

textPath

Define the attribute xlink:href to point to any path, the font surround path.

<svg xmlns="http://www.w3.org/2000/svg">    
    <defs>        
        <path id="my_path" d="M 250,140 c 40,40 80,40 100,20" />        
        <text font-size="16" fill="# 000">hello</text>    
    </defs>    
    <text>        
        <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> 
            hello . SVG       
        </textPath>   
    </text>
</svg>
Copy the code

Gradient, animation

Defined in the defs element and given an ID, referred to by the url(#**) as the value of fill \ stroke,

Linear gradient, radial gradient

  • linearGradient– Linear gradient
    • x1\y1\x2\y2You can define the direction of the gradient.
  • radialGradient– Radial gradient
    • cx\cyDefine the circle around which the gradient ends, and set the r radius
    • rDefine the radius of the ring.
    • fx/fyDefine the center of the gradient.

With the stop element, set the interrupt value attribute,

  • offset– Gradient offset *stop-color– Gradient color *stop-opacity– Gradient transparency
<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear">
            <stop offset="0%" stop-color="rgba(0,0,0,.2)" />
            <stop offset="100%" stop-color="Rgba (0,0,0,1)" />
        </linearGradient>
        <radialGradient id="radial">
            <stop offset="0%" stop-color="rgba(0,0,0,.2)" />
            <stop offset="100%" stop-color="Rgba (0,0,0,1)" />
        </radialGradient>
    </defs>
    <rect x="20" y="20" width="200" height="100" fill="url(#linear)" />
    <rect x="20" y="150" width="200" height="100" fill="url(#radial)" />
</svg>
Copy the code

The following example shows the properties for linear and radial gradients.

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear-copy" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="rgba(0,0,0,.2)" />
            <stop offset="100%" stop-color="Rgba (0,0,0,1)" />
        </linearGradient>
        <radialGradient id="radial-copy" cx="1" cy="1" r="1" fx="1" fy="1">
            <stop offset="0%" stop-color="rgba(0,0,0,.2)" />
            <stop offset="100%" stop-color="Rgba (0,0,0,1)" />
        </radialGradient>
    </defs>
    <rect x="300" y="20" width="200" height="100" fill="url(#linear-copy)" />
    <rect x="300" y="150" width="200" height="100" fill="url(#radial-copy)" />
</svg>
Copy the code

Other attribute definitions

  • SpreadMethod – Describes the gradient process

    • pad– Default effects
    • refelct– Let the gradient last forever.
    • repeat– Repeat the previous gradient process to continue the gradient.

  • GradientUnits Properties that describe the size and direction of the gradient

    • uesrSpaceOnUse– Calculates the position of an object using absolute units.
    • objectBoundingBox– Default, relative location, specified0-1The coordinate of theta.

Translation, rotation, bevel, scaling

Defined using the Transform property

  • translate(x,y)– Translation, moving elements to x and y.
  • rotate(num,x,y)– Rotation, which can be defined by(x,y)Rotate for the origin. Default to current element coordinate system (top left)
  • skewX()\skewY() – Tilt transformation.
  • scale(x\y)– Scale. Scale proportionally
<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="300" width="150" height="100" fill="rgba(0,0,0,.4)" />
    <rect x="200" y="300" width="150" height="100" fill="rgba(0,0,0,.4)" transform="Translate (0, 20)" />
    <rect x="400" y="300" width="150" height="100" fill="rgba(0,0,0,.4)" transform="rotate(5)" />
    <rect x="20" y="480" width="150" height="100" fill="rgba(0,0,0,.4)" transform="skewX(5)" />
    <rect x="240" y="480" width="150" height="100" fill="rgba(0,0,0,.4)" transform="scale(.5)" />

    <text x="90" y="350" fill="red">1</text>
    <text x="275" y="380" fill="red">2</text>
    <text x="440" y="400" fill="red">3</text>
    <text x="130" y="530" fill="red">4</text>
    <text x="150" y="270" fill="red">5</text>
</svg>
Copy the code

The text identifies the position of each block. The center point is the upper left corner (0,0).

Matrix complex deformation

Matrix (a, b, C, d, e, f) definition of the transformation matrix with six values.

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M 600 400 c 10 10,20 200,200 0 z" fill="none" stroke="rgba(0,0,0,.6)" />
    <path d="M 600 400 c 10 10,20 200,200 0 z" fill="none" stroke="rgba(0,0,0,.6)" transform="matrix(1 1 0 -1 10 1)" />
</svg>
Copy the code

Cut, mask

Erases parts of an already created element.

Shear –clipPath

Removes part of another element. Usually defined in a DEFs element and referred to by the clip-path attribute.

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="clip">
            <path d="M 920 580 c 20 50,50 90,100 0" />
        </clipPath>
    </defs>
    <rect x="900" y="400" width="150" height="100" fill="rgba(0,0,0,.6)" />
    <rect x="900" y="550" width="150" height="100" fill="none" stroke="red" />
    <rect x="900" y="550" width="150" height="100" fill="rgba(0,0,0,.6)" clip-path="url(#clip)" />
</svg>
Copy the code

Show the section covered by the clipped element.

Mask –mask

Referenced by the mask attribute

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="clip">
            <path d="M 920 580 c 20 50,50 90,100 0" />
        </clipPath>
        <mask id="mask">
            <path d="M 1120 580 c 20 50,50 90,100 0" fill="#fff" />
        </mask>
    </defs>
    <rect x="900" y="400" width="150" height="100" fill="rgba(0,0,0,.6)" />
    <rect x="900" y="550" width="150" height="100" fill="none" stroke="red" />
    <rect x="900" y="550" width="150" height="100" fill="rgba(0,0,0,.6)" clip-path="url(#clip)" />
    <rect x="1100" y="550" width="150" height="100" fill="none" stroke="red" />
    <rect x="1100" y="550" width="150" height="100" fill="rgba(0,0,0,.6)" mask="url(#mask)" />
</svg>
Copy the code

A filter

Achieve shadow effect, blur gradient.

Defined in defs by the filter element and referenced by the attribute filter.

Define fuzzy attributes through word elements:

  • feGaussianBlur– Define image blur
    • inRefers to the result attribute defined by the preceding element. Optional fixed attribute values are:SourceGraphic\SourceAlpha\BackgroundImageAnd so on.
    • stdDeviation– Define ambiguity
    • result– Define a temporary cache where required elements can point to references.
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
    </filter>
    <path d="M 50 50 c 10 10,25 225,180 -10 z" fill="none" stroke="Rgba (0,0,0,1)" />
    <path d="M 50 50 c 10 10,25 225,180 -10 z" fill="none" stroke="Rgba (0,0,0,1)" filter="url(#filter)" />
</svg>
Copy the code

  • feOffset– This is the blur offset
    • in– Points to the result attribute defined by the previous element. The value of the custom attribute is the same as above.
    • dx\dy– The relative offset
    • result– Define a temporary cache where required elements can point to references.
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter-offset">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
        <feOffset in="blur" dx="14" dy="14" />
    </filter>
    <path d="M 50 200 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" />
    <path d="M 50 200 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" filter="url(#filter-offset)" />
</svg>
Copy the code

  • feSpecularLighting– Sets the input source, lighting effect, through the child elementfePointLightSet offset
    • indefine
    • surfaceScale –
    • specularConstant –
    • specularExponent –
    • lighting-color –
    • result– Define a temporary cache where required elements can point to references.
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter-light">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
        <feOffset in="blur" dx="14" dy="14" result="offset" />
        <feSpecularLighting surfaceScale="5" specularConstant="4" specularExponent="20" lighting-color="red">
            <fePointLight x='1000' y="500" z="1000" />
        </feSpecularLighting>
    </filter>
    <path d="M 50 350 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" />
    <path d="M 50 350 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" filter="url(#filter-light)" />
</svg>
Copy the code

  • feComposite– Effect synthesis
    • in\in2– Points to the input source
    • operator– Define composition patterns
    • k1\k2\k3\k4
    • result– Define a temporary cache where required elements can point to references.
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter-composite">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
        <feOffset in="blur" dx="14" dy="14" result="offset" />
        <feSpecularLighting surfaceScale="5" specularConstant="4" specularExponent="20" lighting-color="red"
            result="light">
            <fePointLight x='1000' y="500" z="1000" />
        </feSpecularLighting>
        <feComposite in2="light" in="SourceGraphic" operator="arithmetic" k1="10" k2="10" k3="10" k4="0" />
    </filter>
    <path d="M 50 500 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" />
    <path d="M 50 500 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" filter="url(#filter-composite)" />
</svg>
Copy the code

  • feMerge– Merges various effects through child elementsfeMergeNode
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter-merge">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
        <feOffset in="blur" dx="14" dy="14" result="offset" />
        <feSpecularLighting surfaceScale="5" specularConstant="4" specularExponent="20" lighting-color="red"
            result="light">
            <fePointLight x='1000' y="500" z="1000" />
        </feSpecularLighting>
        <feComposite in2="light" in="SourceGraphic" operator="arithmetic" k1="10" k2="10" k3="10" k4="0"
            result="composite" />
        <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="light" />
        </feMerge>
    </filter>
    <path d="M 300 500 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" />
    <path d="M 300 500 c 10 10,25 225,180 -10 z" fill="none" stroke="rgba(0,0,0,.6)" filter="url(#filter-merge)" />
</svg>
Copy the code

Draw a heart shape

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
    <defs>
        <pattern id="color" x="10" y="10" width="1" height="..">
            <rect x="0" y="0" width="5" height="15" fill="red" fill-opacity="5" />
        </pattern>
    </defs>
    
    <g id="heart" fill="url(#color)">
        <path d="M 200 500 c-150-80,-80 100,50 150" stroke="rgba(0,0,0,.6)" stroke-width="2" />
        <path d="M 200 500 C 100-180,80 100,50 150" stroke="rgba(0,0,0,.6)" stroke-width="2" />
    </g>
</svg>
Copy the code

It was so hard, it took me a long time.