拼接磁贴
stitchTiles 属性定义了 Perlin 噪声图块在边界处的行为。
你可以将此属性与以下 SVG 元素一起使用
示例
html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="noise1" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" stitchTiles="noStitch" />
</filter>
<filter id="noise2" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
</filter>
<rect x="0" y="0" width="100" height="100" filter="url(#noise1)" />
<rect x="100" y="0" width="100" height="100" filter="url(#noise1)" />
<rect x="0" y="100" width="100" height="100" filter="url(#noise1)" />
<rect x="100" y="100" width="100" height="100" filter="url(#noise1)" />
<rect x="220" y="0" width="100" height="100" filter="url(#noise2)" />
<rect x="320" y="0" width="100" height="100" filter="url(#noise2)" />
<rect x="220" y="100" width="100" height="100" filter="url(#noise2)" />
<rect x="320" y="100" width="100" height="100" filter="url(#noise2)" />
</svg>
用法说明
| 值 | noStitch | stitch |
|---|---|
| 默认值 | noStitch |
| 可动画的 | 是 |
noStitch-
此值表示不会尝试在包含湍流函数的图块边界处实现平滑过渡。有时结果会在图块边界处显示明显的断层。
stitch-
此值表示用户代理将自动调整基频的 x 和 y 值，以便
<feTurbulence>节点的宽度和高度（即当前子区域的宽度和高度）包含图块宽度和高度在第一个倍频程中的整数倍。
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # element-attrdef-feturbulence-stitchtiles |
浏览器兼容性
加载中…