svg阴影的使用

最新推荐文章于 2025-03-30 06:05:30 发布

活着就是为了樱岛麻衣~

最新推荐文章于 2025-03-30 06:05:30 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_54443782/article/details/125853038

本文介绍了如何在SVG中创建阴影和渐变效果。通过使用`<filter>`元素配合`feOffset`来设定阴影，调整`dx`, `dy`, `stdDeviation`等属性以实现不同的阴影效果。同时，文章探讨了如何改变阴影颜色，并详细解析了线性渐变（`linearGradient`）和径向渐变（`radialGradient`）的用法，包括它们的坐标和范围设置，以帮助设计出多样化的图形效果。" 116461727,7868593,Java并发：ConcurrentLinkedQueue源码解析,"['Java', '并发编程', '多线程', '数据结构', '队列']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg的基本格式是：

 <defs >
            <!-- 这是一个过滤器 -->
            <filter>
  
            </filter>
        </defs>

在filter里面写阴影的样式，例如给一个长方形加阴影完整代码是：

<svg width="800" height="800">
        <!-- 这是一个定义标签 -->
        <defs >
            <!-- 这是一个过滤器 -->
            <filter width="200%" height="200%" id="url">
                <!-- 这是用于创建阴影效果 -->
                    <feOffset in="SourceGraphic" dx="20" dy="20" result="set" fill="green"/>
                    <feGaussianBlur in="set" result="suo"  stdDeviation="10"/>
                <!-- 这是用于创建元素混合滤镜，显示原内容 -->
                    <feBlend  in="SourceGraphic" in="suo" mdoe="normal"/>
            </filter>
        </defs>
        <!-- 长方形 -->
        <rect x="100" y="100" width="200" height="100" fill="red" filter="url(#url)"/>
    <