Today I will mainly talk about the special effects of SVG
In fact, it is similar to canvas, but it uses XML tags
Not used a lot, but just in case in the future Use it or organize it

Picture addition

You can also add pictures to svg

<svg width=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>

Note that this is the image tag instead of our html The img tag in

xlink:href specifies the resource path
x,y image coordinate position
height,width the width and height of the image displayed in svg

Filter primitive

svg provides us with a lot of filters

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• ##feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

##feDistantLight
fePointLight
feSpotLight
Use the filter tag to define the filter, and the filter must have an id identifier

filter = "url (#id)"
To quote the filterUsing filters can build gorgeous patterns

Gaussian blur

feGaussianBlur is used to create a blur effect

<svg width=100 height=100>
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15">
    </filter>
  </defs>
  <rect width="100" height="100" stroke="blue" stroke-width="3"
  fill="red" filter="url(#f1)"></svg>

The filter id attribute defines the unique name of a filter

in Defines the effect created from the entire image
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
< filter-primitive-reference >)
stdDeviation Defines the blur amount
The filter attribute of the rect element links the element to the "f1" filter

Gradient

It is also divided into linear gradient and radial gradient

Linear Gradient

<svg widht=300 height=300>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad1)" /></svg>

x1, y1, x2, y2 of linearGradient define the starting and ending positions of the gradient

Note that the XML single tag must have "/", otherwise the tag will be invalid

Radial gradient

<svg width=300 height=300>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad2)" /></svg>

radialGradient’s cx, cy and r define the outermost circle

The color is also specified by the stop tag

g tag

us When using the tool

In fact, there is nothing magical about this XML tag
It is equivalent to a container, and we can specify the same style for the graphics inside it
For example, color, coordinate system, filters, etc.

<svg width=300 height=300 viewbox="0 0 30 30">
    <g stroke="red">
        <path d="M 5 10 L 25 10"></path>
        <path d="M 5 15 L 25 15"></path>
        <path d="M 5 20 L 25 20"></path>
    </g></svg>

Finally, I recommend an svg library snap.svg

snap.svg

The above is the content of adding SVG (scalable vector graphics) images, Gaussian blur, gradient and g tag. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!