利用svg实现图形的阴影以及渐变功能。

最新推荐文章于 2024-08-02 22:32:22 发布

li宾是我哥

最新推荐文章于 2024-08-02 22:32:22 发布

阅读量1.2k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/gx01013/article/details/125853316

版权

本文介绍了如何使用SVG实现图形的阴影和渐变效果。SVG滤镜通过<defs>和<filter>元素定义，其滤镜属性可以调整阴影模式。在阴影部分，通过改变feBlend标签的mode属性，可以实现正常、正片叠底、滤色等多种模式。在渐变部分，<linearGradient>元素用于创建线性渐变，可定义水平、垂直和角形渐变。通过不同的x1、x2、y1和y2值，可以创建出各种方向的渐变效果。

摘要由CSDN通过智能技术生成

Svg阴影：

值得注意的是Internet Explorer和Safari不支持SVG滤镜！

<defs> 和 <filter>

所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。<filter>标签用来定义SVG滤镜。

滤镜的属性：

属性	作用
x，y	提供左上角的坐标来定义在哪里渲染滤镜效果。（默认值：0）
width，height	绘制滤镜容器框的高宽（默认都为100%）
result	用于dingyi一个滤镜效果的输出名字，以便于气用作另一个滤镜效果的输入（in）
in	指定滤镜效果的输入源，可以是某个滤镜导出的 result ，也可以是下面六个值

代码片段：

        <svg>
			<!-- 定义滤镜，defs是一个定义标签 -->
			<defs>
				<filter id="f1" width="200%" height="200%">
                    <!-- 使用偏移滤镜 -->
                    <feOffset in="SourceGraphic" result="offs