svg 中的无缝波浪效果

Question

有没有办法让整个svg实现完美的无缝波浪效果。我尝试通过动画

baseFrequency

过滤器的

feTurbulence

来解决这个问题，但它没有给我我需要的东西。

const lower = 0;
const upper = 0.008;
const step = 0.0001;
const time = 5000;

function animateBaseFrequency() {
    let direction = 1; // 1 for incrementing, -1 for decrementing
    let x = lower;

    d3.select('#fltOne')
        .transition()
        .duration(time)
        .ease(d3.easeLinear)
        .tween('x', function() {
            return function(t) {
                x = x + step * direction;
                if (x >= upper || x <= lower) {
                    direction *= -1; // Reverse direction at upper and lower bounds
                }

                d3.select(this).attr('baseFrequency', x);
            };
        }).on('end', animateBaseFrequency);
}

animateBaseFrequency();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
    <link rel="stylesheet" href="style.css">
    <div id="container" class="svg-container">
        <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
            <defs id="pattern">
                <pattern id="af" width="100%" height="100%" patternContentUnits="objectBoundingBox">
                    <image xlink:href="https://raw.githubusercontent.com/d3/d3-logo/master/d3.svg"
                        preserveAspectRatio="xMidYMid meet" width="1" height="1"></image>
                </pattern>
                <pattern patternContentUnits="userSpaceOnUse" id="main">
                    <rect class="patRect" width="400" height="300" fill="url(#af)"></rect>
                </pattern>
                <filter id="filt">
                    <feTurbulence result="TURBULENCE" numOctaves="1" seed="1" baseFrequency="0" stitchTiles="noStitch"
                        id="fltOne"></feTurbulence>
                    <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="30" result="dist" id="fltTwo">
                    </feDisplacementMap>
                </filter>
            </defs>
            <rect class="rectOne" x="100" y="100" width="400" height="300" fill="url(#af)"
                style="filter: url(&quot;#filt&quot;);"></rect>
        </svg>
    </div>
    <!--d3 script-->
    <script src="prod.js" defer></script>
</body>

</html>

Answer 1

这个怎么样：

在湍流上使用
```
stitchTiles="stitch"
```
，以便生成无缝可重复的瓷砖
用双宽
```
<feTile>
```
针对湍流图块的宽度重复设置该图案的
```
x
```
位置动画
使用结果作为位移图的输入

请注意，在应用偏移之前，整个过滤器必须有足够的宽度来包含完整的重复图块，否则 <feTile> 将在过滤器区域的边界处被切掉。

<svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
    <defs id="pattern">
        <filter id="filt" width="2">
            <feTurbulence numOctaves="1" seed="1" baseFrequency="0.008"
                          stitchTiles="stitch"
                          id="fltOne" width="400" height="400">
            </feTurbulence>
            <feTile width="800" height="400">
            </feTile>
            <feOffset result="TURBULENCE" dx="0">
                <animate attributeName="dx" from="-400" to="0"
                         begin="0s" dur="2s" repeatCount="indefinite" />

            </feOffset>
            <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="30" result="dist" id="fltTwo">
            </feDisplacementMap>
        </filter>
    </defs>
    <image xlink:href="https://raw.githubusercontent.com/d3/d3-logo/master/d3.svg" x="100" y="100" width="400" height="300" style="filter: url(#filt);" />
</svg>

svg 中的无缝波浪效果

问题描述投票：0回答：1

1个回答

最新问题

svg 中的无缝波浪效果

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1