借助 SVG 滤镜,您可以为 SVG 图形和文字添加特殊效果。对于其他类型的元素,您可以使用 CSS 效果。
SVG 滤镜效果示例(左侧是原始 SVG)
如需添加或修改 SVG 滤镜,请执行以下操作:
- 右键点击相应 SVG 或文字元素。
- 从弹出式菜单中选择添加 SVG 滤镜…。如果已应用滤镜,请选择修改 SVG 滤镜…。
- 在修改 SVG 滤镜对话框中,从右侧面板的滤镜下拉列表中选择一个滤镜。
- 自定义滤镜设置。
- 点击保存。系统会将您的设置保存为自定义滤镜。
注意:当有媒体规则处于有效状态时,无法应用 SVG 滤镜。
文字元素
对文字元素应用 SVG 滤镜后,相应文字会转换为 SVG,并且您将无法再使用“文字工具”修改相应文字。SVG 文字显示在一行内,不会换行,因此所有换行符都会被移除。可通过移除 SVG 滤镜来撤消该转换。
在修改 SVG 滤镜对话框中,您可以对文字进行以下更改:
- 文字(文字内容)
- 字体大小
- 文字颜色
滤镜及其设置
无
不对 SVG 元素应用任何效果。通过 SVG 滤镜转换为 SVG 的文字将恢复为文字元素。
灵气
使 SVG 元素被灵气环绕。
| 设置 | 说明 |
|---|---|
| X 轴半径 | 灵气的水平半径。 保持同一宽高比 |
| Y 轴半径 | 灵气的垂直半径。 保持同一宽高比 |
| 颜色 | 灵气的颜色。 |
斜角
使 SVG 元素的边缘呈现斜角视觉效果。
| 设置 | 说明 |
|---|---|
| 圆度 | 斜角的曲度。 |
| 深度 | 斜角的深度。 |
模糊
对 SVG 元素进行模糊处理。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响元素呈现的模糊程度。 |
| X 轴半径 | 模糊效果的水平半径。 保持同一宽高比 |
| Y 轴半径 | 模糊效果的垂直半径。 保持同一宽高比 |
空坑
为 SVG 元素添加空坑视觉效果。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响空坑的大小。 |
| 深度 | 空坑的深度。 |
| 角度 | 空坑的角度。 |
消融
为 SVG 元素的某些部分添加侵蚀效果。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响消融区域的大小。 |
| 轮廓清晰度 | 原始边缘的保留程度。 |
阴影
为 SVG 元素添加阴影。
| 设置 | 说明 |
|---|---|
| 阴影 X | 阴影相对于元素的水平偏移量。 保持同一宽高比 |
| 阴影 Y | 阴影相对于元素的垂直偏移量。 保持同一宽高比 |
| 模糊半径 | 阴影模糊效果的半径。值越大,阴影看起来越模糊。 |
| 颜色 | 阴影的颜色。 |
闪光
在 SVG 元素上创建闪光视觉效果。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响 SVG 元素的光亮程度。 |
| 光源高度 | 光源的高度。这会影响光源照射 SVG 元素的角度。 |
| 颜色 | 光源的颜色。 |
光晕
为 SVG 元素添加光晕。
| 设置 | 说明 |
|---|---|
| X 轴半径 | 光晕的水平半径。 保持同一宽高比 |
| Y 轴半径 | 光晕的垂直半径。 保持同一宽高比 |
| 颜色 | 光晕的颜色。 |
膨胀
使 SVG 元素看起来像气球一样膨胀。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响元素呈现的立体程度。 |
| 着色颜色 | 元素上反射色调的颜色。 |
| 着色强度 | 反射色调的强度。 |
| 阴影 X | 阴影相对于元素的水平偏移量。 |
| 阴影 Y | 阴影相对于元素的垂直偏移量。 |
轮廓
为 SVG 元素的边缘添加轮廓。
| 设置 | 说明 |
|---|---|
| X 轴半径 | 轮廓的水平半径。 保持同一宽高比 |
| Y 轴半径 | 轮廓的垂直半径。 保持同一宽高比 |
| 颜色 | 轮廓的颜色。 |
棕褐色
将 SVG 元素的颜色更改为棕褐色。
| 设置 | 说明 |
|---|---|
| 亮度 | 元素的亮度。 |
飞溅
使 SVG 元素看起来像飞溅到液体中。会生成两种液体溅洒效果。在下面的示例中,“溅洒 1”为紫色,而“溅洒 2”为蓝色。
| 设置 | 说明 |
|---|---|
| 缩放 | 整体效果的缩放比例。这会影响液滴的大小。 |
| 模式 | 从 10 种飞溅模式中选择一种。 |
| 亮度 | 元素的亮度。 |
| 溶解 | 元素呈现的溶解程度。 |
| 溅洒 1 缩放 | 第一个溅洒效果的缩放比例。 |
| 溅洒 1 模糊 | 第一个溅洒效果的模糊度。 |
| 溅洒 2 颜色 | 第二个溅洒效果的颜色。 |
| 溅洒 2 缩放 | 第二个溅洒效果的缩放比例。 |
| 溅洒 2 模糊 | 第二个溅洒效果的模糊度。 |
纹理
使 SVG 元素呈现纹理视觉效果。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响纹理段的大小。 |
| 着色颜色 | 着色的颜色。 |
| 着色强度 | 着色的强度。 |
| 模糊 | 元素的模糊度。 |
| 圆度 | 每个纹理段的曲度。 |
| 模式 | 从 10 种纹理模式中选择一种。 |
变形
使 SVG 元素扭曲。
| 设置 | 说明 |
|---|---|
| 缩放 | 该效果的缩放比例。这会影响变形波纹的大小。 |
| 失真 | 失真的严重程度。 |