SVG (Scalable Vector Graphics) image addition, Gaussian blur, gradient and g tag

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

Graphic elements pass

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

Let’s mainly take a look at the feGaussianBlur Gaussian blur filter

Gaussian blur

feGaussianBlur is used to create a blur effect

The filter is defined in the defs element

<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

feGaussianBlur Define the blur effect

in Defines the effect created from the entire image
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
)
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

Usage is analogous to the gradient of canvas

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

The color direction is specified by the stop tag

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

fx and fy define the innermost circle

The color is also specified by the stop tag

g tag

us When using the tool

You may see it in the export code

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

that allows us to operate the DOM like jQuery. 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 )!