SVG阴影与渐变

最新推荐文章于 2023-09-03 16:43:20 发布

小媛同学.，

最新推荐文章于 2023-09-03 16:43:20 发布

阅读量665

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_61843988/article/details/125853192

版权

本文详细介绍了SVG的阴影和渐变效果。在SVG阴影部分，讲解了如何使用、、、和创建阴影效果。在SVG渐变部分，阐述了线性渐变和径向渐变的使用，包括它们的属性和应用示例。

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

1.1 SVG阴影

1.1.1 <defs> 和 <filter>

所有互联网的SVG滤镜定义在<defs>元素中。

<defs>元素是定义的缩写并含有特殊元素（如滤镜）定义。

<filter>标签用来定义SVG滤镜。

<filter>元素具有必须的id属性，用于标识滤镜。图形然后指向要使用的滤镜。

1.1.2 <feOffset>

<feOffset>元素是用于创建阴影效果；想法是采取一个SVG图形（图像或元素）并将其在xy平面中移动一点，然后将原始图像混合在偏移图像的顶部（使用<feBlend>）

示例：偏移一个矩形

示例代码：

<svg>
    <!-- 定义滤镜 defs 是一个定义标签 -->
    <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
            <!-- 使用偏移滤镜 -->
            <feOffset result="offset" in="SourceGraphic" dx="20" dy="20" />
            <!-- 滤镜：正常 -->
            <feBlend in="SourceGraphic" in2="offset" mode="normal" />
            <!-- 滤镜：正片叠底 -->
            <!-- <feBlend in="SourceGraphic" in2="offset" mode="multiply" /> -->
        </filter>
    </defs>
    <rect width="90" height="90" stroke="black" stroke-width="3" fill="orange"  filter="url(#f1)" />
</svg>