Home >Web Front-end >H5 Tutorial >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
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
svg provides us with a lot of filters
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
filter = "url (#id)"
To quote the filterUsing filters can build gorgeous patterns
Gaussian blur
<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 |
1d4578e5a21c1594de577f48c676e1f1)
stdDeviation Defines the blur amount
The filter attribute of the rect element links the element to the "f1" filter
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
cc780654b414c046f896056047467c6eRadial 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
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 )!