SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签

黄舟

发布时间：2017-02-27 15:18:49

2905人浏览过

来源于php中文网

原创

今天主要谈一下svg的特殊效果
其实和canvas都是差不多的，只不过是利用xml标签
用的不是很多但是以防以后万一用到还是整理一下

图片添加

svg中也可以添加图片

注意这里是image标签而不是我们html中的img标签

xlink:href指定资源路径
x,y 图片坐标位置
height,width 图片在svg中显示的宽高

滤镜原语

svg给我们提供了很多滤镜

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile

TapNow
新一代AI视觉创作引擎

下载
feTurbulence
feDistantLight
fePointLight
feSpotLight

使用filter标签来定义滤镜，而且滤镜必须有id标识
图形元素通过 filter = "url(#id)" 来引用滤镜

使用滤镜可以构建绚丽的图案
我们主要来看一下这个feGaussianBlur高斯模糊滤镜

高斯模糊

feGaussianBlur用于创建模糊效果
滤镜定义在defs元素中

渐变

同样分为线性渐变和径向渐变
用法类比canvas的渐变

线性渐变

linearGradient的 x1,y1,x2,y2定义了渐变起始和结束位置
颜色方位由stop标签指定
注意XML单标签是要有“/”的，否则标签无效

径向渐变

radialGradient的cx，cy和r定义最外层圆
fx和fy定义最内层圆
颜色同样由stop标签指定

g标签

我们在使用工具的时候
可能会在导出代码中看到
其实这个XML标签没有什么神奇的
它就相当于一个容器，我们可以为它内部的图形指定相同的样式
比如说颜色、坐标系、滤镜等等

最后推荐给大家一个svg库snap.svg
可以让我们像jQuery操作DOM一样操作SVG
snap.svg

以上就是SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签的内容，更多相关内容请关注PHP中文网（www.php.cn）！

HTML5如何使用SVG（代码示例）

H5页面制作中如何适配不同分辨率屏幕多分辨率适配终极方案

H5页面制作中如何集成微信分享功能微信分享功能接入完整教程

H5页面如何实现用户登录状态保存用户会话保持技术方案对比

H5页面制作中如何嵌入视频播放器主流视频播放器集成方法大全

相关标签:

svg

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化，包括单例模式、工厂模式、观察者模式、策略模式、命令模式等，结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析，帮助开发者掌握如何运用设计模式构建高质量的软件架构，提升系统的灵活性与可扩展性。

2026.01.30

c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容，阅读专题下面的文章了解更多详细内容。

2026.01.30

java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

2026.01.30

python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.30

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

热门下载

网站特效

网站源码

网站素材

前端模板