Web Front-end
H5 Tutorial
SVG (Scalable Vector Graphics) image addition, Gaussian blur, gradient and g tag
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
filter = "url (#id)"
To quote the filterUsing filters can build gorgeous patterns
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
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
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
Note that the XML single tag must have "/", otherwise the tag will be invalidRadial 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
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
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 )!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Let's talk about how to use SVG to achieve image mosaic effect
Sep 01, 2022 am 11:05 AM
How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!
How to convert svg to jpg format
Nov 24, 2023 am 09:50 AM
svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.
An in-depth analysis of how to use svg icons in vue3+vite
Apr 28, 2022 am 10:48 AM
svg images are widely used in projects. The following article will introduce how to use svg icons in vue3 + vite. I hope it will be helpful to everyone!
Detailed explanation of using SVG to add logo to favicon
Sep 07, 2022 am 10:30 AM
How to add logo to favicon using SVG? The following article will introduce to you how to use SVG to generate favicon with logo. I hope it will be helpful to you!
VUE3 introductory tutorial: Use Vue.js plug-in to play with SVG
Jun 16, 2023 am 09:48 AM
With the continuous development of modern Web front-end development, more and more technologies are widely used in actual development. Among them, Vue.js is currently one of the most popular JavaScript frameworks. It is based on the MVVM model and provides a rich API and component library, making it easier to develop responsive, reusable, and efficient web applications. The latest version of Vue.js3 has better performance and richer features than the old version, which has attracted widespread attention and research. This article will introduce to you a
How to use svg method in vue3+vite2
May 11, 2023 pm 05:55 PM
1. Install vite-plugin-svg-icons. You also need to install fast-glob related dependencies. Otherwise, when vite runs npmrundev, it will report the Cannotfindmodule'fast-glob' error npmifast-glob@3.x-Dnpmivite-plugin-svg. -icons@2.x-D 2. Create a new component index.vueimport{computed}from'vue';cons under src/components/svgIcon
Draw SVG files on HTML5 canvas
Sep 15, 2023 pm 03:09 PM
To draw HTMLImageElements on a canvas element, use the drawImage() method. This method defines an Image variable using src="mySVG.svg" and uses drawImage when loading. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";
How to use svg in vue3+vue-cli4
May 11, 2023 pm 05:58 PM
1. Install svg-sprite-loadernpminstallsvg-sprite-loader--save-dev 2. Create a new component under src/components/svgIcon index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup
