如何使用 offset-path CSS 属性 从其原始位置偏移 SVG 路径
How to offset SVG path from its origin position using offset-path CSS property
我有一堆 SVG 路径是文本字母。在滚动时，我想从它们的原始位置开始沿着 offset-path 对它们进行动画处理。所以我给 0x 和 0y 起始位置给 offset-path 属性 然后给随机 Line 给 offset-path 我想沿着它制作 SVG 字母的动画，像这样：
path.setAttribute("style", "offset-path: path('M" + 0 +" " + 0 + " L " + generateRandomAnimationPathLine() + " " + generateRandomAnimationPathLine() + "')");
但是一旦我为所有 SVG 路径 offset-path 赋予随机 L 属性，它们就已经遍布整个屏幕并且 offset-distance 设置为 0%。这是为什么？如果 offset-distance 设置为 0，它们不应该留在原点吗？为什么 offset-path: path() 中的 L 从原点移动 SVG，即使 M 设置为 0？
您可以检查每个 SVG 字母并勾选 offset-distance 以查看它们是否已经超出原点。如何从原始位置开始对 SVG 路径进行动画处理？我正在尝试实现一种效果，当您滚动它时它会慢慢破坏“Hello，World”，当您向上滚动时它会恢复到原始形式。
图像来解释我正在努力实现的目标。当 SVG 在屏幕上时，将 offset-path 设置为随机 Lines/L，我想通过将 offset-distance 从 0% 更改为 100% 来使 SVG 字母从其原始位置开始动画相对于滚动，像这样：
path.style.offsetDistance = element.intersectionRatio * 100 + "%";
实例：https://codepen.io/Limpuls/pen/KKzZWEm
代码：
<section class="row first">
<div class="col-lg-12">
<div class="svg">
<svg viewBox="-145 -90 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26 2V30H19.52V18.52H6.80001V30H0.320007V2H6.80001V13.04H19.52V2H26Z" fill="black"/>
<path d="M53.2647 19.32C53.2647 19.4 53.2247 19.96 53.1447 21H36.8647C37.158 22.3333 37.8514 23.3867 38.9447 24.16C40.038 24.9333 41.398 25.32 43.0247 25.32C44.1447 25.32 45.1314 25.16 45.9847 24.84C46.8647 24.4933 47.678 23.96 48.4247 23.24L51.7447 26.84C49.718 29.16 46.758 30.32 42.8647 30.32C40.438 30.32 38.2914 29.8533 36.4247 28.92C34.558 27.96 33.118 26.64 32.1047 24.96C31.0914 23.28 30.5847 21.3733 30.5847 19.24C30.5847 17.1333 31.078 15.24 32.0647 13.56C33.078 11.8533 34.4514 10.5333 36.1847 9.6C37.9447 8.64 39.9047 8.16 42.0647 8.16C44.1714 8.16 46.078 8.61333 47.7847 9.52C49.4914 10.4267 50.8247 11.7333 51.7847 13.44C52.7714 15.12 53.2647 17.08 53.2647 19.32ZM42.1047 12.88C40.6914 12.88 39.5047 13.28 38.5447 14.08C37.5847 14.88 36.998 15.9733 36.7847 17.36H47.3847C47.1714 16 46.5847 14.92 45.6247 14.12C44.6647 13.2933 43.4914 12.88 42.1047 12.88Z" fill="black"/>
<path d="M57.4191 0.319998H63.6591V30H57.4191V0.319998Z" fill="black"/>
<path d="M69.4503 0.319998H75.6903V30H69.4503V0.319998Z" fill="black"/>
<path d="M91.7216 30.32C89.4549 30.32 87.4149 29.8533 85.6016 28.92C83.8149 27.96 82.4149 26.64 81.4016 24.96C80.3882 23.28 79.8816 21.3733 79.8816 19.24C79.8816 17.1067 80.3882 15.2 81.4016 13.52C82.4149 11.84 83.8149 10.5333 85.6016 9.6C87.4149 8.64 89.4549 8.16 91.7216 8.16C93.9882 8.16 96.0149 8.64 97.8016 9.6C99.5882 10.5333 100.988 11.84 102.002 13.52C103.015 15.2 103.522 17.1067 103.522 19.24C103.522 21.3733 103.015 23.28 102.002 24.96C100.988 26.64 99.5882 27.96 97.8016 28.92C96.0149 29.8533 93.9882 30.32 91.7216 30.32ZM91.7216 25.2C93.3216 25.2 94.6282 24.6667 95.6416 23.6C96.6816 22.5067 97.2016 21.0533 97.2016 19.24C97.2016 17.4267 96.6816 15.9867 95.6416 14.92C94.6282 13.8267 93.3216 13.28 91.7216 13.28C90.1216 13.28 88.8016 13.8267 87.7616 14.92C86.7216 15.9867 86.2016 17.4267 86.2016 19.24C86.2016 21.0533 86.7216 22.5067 87.7616 23.6C88.8016 24.6667 90.1216 25.2 91.7216 25.2Z" fill="black"/>
<path d="M109.819 22.56C110.939 22.56 111.859 22.92 112.579 23.64C113.299 24.3333 113.659 25.2533 113.659 26.4C113.659 26.9333 113.592 27.4667 113.459 28C113.326 28.5333 113.032 29.3333 112.579 30.4L110.299 36.16H106.339L108.099 29.8C107.432 29.5333 106.899 29.1067 106.499 28.52C106.126 27.9067 105.939 27.2 105.939 26.4C105.939 25.2533 106.299 24.3333 107.019 23.64C107.766 22.92 108.699 22.56 109.819 22.56Z" fill="black"/>
<path d="M171.976 2L162.816 30H155.856L149.696 11.04L143.336 30H136.416L127.216 2H133.936L140.256 21.68L146.856 2H152.856L159.256 21.84L165.776 2H171.976Z" fill="black"/>
<path d="M183.792 30.32C181.525 30.32 179.485 29.8533 177.672 28.92C175.885 27.96 174.485 26.64 173.472 24.96C172.459 23.28 171.952 21.3733 171.952 19.24C171.952 17.1067 172.459 15.2 173.472 13.52C174.485 11.84 175.885 10.5333 177.672 9.6C179.485 8.64 181.525 8.16 183.792 8.16C186.059 8.16 188.085 8.64 189.872 9.6C191.659 10.5333 193.059 11.84 194.072 13.52C195.085 15.2 195.592 17.1067 195.592 19.24C195.592 21.3733 195.085 23.28 194.072 24.96C193.059 26.64 191.659 27.96 189.872 28.92C188.085 29.8533 186.059 30.32 183.792 30.32ZM183.792 25.2C185.392 25.2 186.699 24.6667 187.712 23.6C188.752 22.5067 189.272 21.0533 189.272 19.24C189.272 17.4267 188.752 15.9867 187.712 14.92C186.699 13.8267 185.392 13.28 183.792 13.28C182.192 13.28 180.872 13.8267 179.832 14.92C178.792 15.9867 178.272 17.4267 178.272 19.24C178.272 21.0533 178.792 22.5067 179.832 23.6C180.872 24.6667 182.192 25.2 183.792 25.2Z" fill="black"/>
<path d="M205.723 11.32C206.469 10.28 207.469 9.49333 208.723 8.96C210.003 8.42667 211.469 8.16 213.123 8.16V13.92C212.429 13.8667 211.963 13.84 211.723 13.84C209.936 13.84 208.536 14.3467 207.523 15.36C206.509 16.3467 206.003 17.84 206.003 19.84V30H199.763V8.48H205.723V11.32Z" fill="black"/>
<path d="M216.833 0.319998H223.073V30H216.833V0.319998Z" fill="black"/>
<path d="M250.784 0.319998V30H244.824V27.52C243.278 29.3867 241.038 30.32 238.104 30.32C236.078 30.32 234.238 29.8667 232.584 28.96C230.958 28.0533 229.678 26.76 228.744 25.08C227.811 23.4 227.344 21.4533 227.344 19.24C227.344 17.0267 227.811 15.08 228.744 13.4C229.678 11.72 230.958 10.4267 232.584 9.52C234.238 8.61333 236.078 8.16 238.104 8.16C240.851 8.16 242.998 9.02667 244.544 10.76V0.319998H250.784ZM239.184 25.2C240.758 25.2 242.064 24.6667 243.104 23.6C244.144 22.5067 244.664 21.0533 244.664 19.24C244.664 17.4267 244.144 15.9867 243.104 14.92C242.064 13.8267 240.758 13.28 239.184 13.28C237.584 13.28 236.264 13.8267 235.224 14.92C234.184 15.9867 233.664 17.4267 233.664 19.24C233.664 21.0533 234.184 22.5067 235.224 23.6C236.264 24.6667 237.584 25.2 239.184 25.2Z" fill="black"/>
</svg>
</div>
</div>
</section>
JS:
let thresholdArray = []
for (let i = 10; i < 100; i += 1){
thresholdArray.push(i / 100);
}
let options = {
root: null,
rootMargin: "20px",
threshold: thresholdArray
};
let pathGenerated = false;
let callback = (entries, observer) => {
entries.forEach(element => {
element.target.querySelectorAll("path").forEach(path => {
if (element.isIntersecting) {
if (!pathGenerated) {
path.setAttribute("style", "offset-path: path('M" + 0 +" " + 0 + " L " + generateRandomAnimationPathLine() + " " + generateRandomAnimationPathLine() + "')");
}
path.style.offsetDistance = element.intersectionRatio * 100 + "%";
} else {
pathGenerated = false;
path.style.removeProperty("offset-path");
}
});
});
pathGenerated = true;
}
let generateRandomAnimationPathLine = (element) => {
return Math.floor(Math.random() * Math.floor(100));
}
let observer = new IntersectionObserver(callback, options);
document.querySelectorAll('section').forEach(section => {
console.log(section)
observer.observe(section);
});
有两个误解。第一个涉及 offset-path 的工作方式。如果您定义了移动字母的路径，则可以使用移动坐标系完成此操作：
- 坐标系原点移动到
offset-distance所指路径上的点。
- 如果 属性
offset-rotate 没有其他设置，坐标系会旋转 automatically 使得 x-axis 沿着路径的切线指向当前使用的点。
- 然后，在移动和旋转的坐标系中绘制字母。
与您上面的图片所暗示的相反，这些字母并没有随着距离的增加而从它们的原始位置移开，它们中的每一个总是与它的原点有一段距离未移动坐标系，沿偏移路径旋转移动。 （由于每个路径都有一个单独的偏移路径，这意味着每个字母都有一个单独的坐标系。）
从某种意义上说，对于你的直线，应用旋转 before 甚至有一个很小的距离，这就是为什么字母到处都是的原因。
一旦设置
path {
offset-rotate: 0deg;
}
坐标系的旋转被抑制，在offset-distance: 0处字母显示在它们原来的位置。对于更远的距离，它们仍然朝不同的方向移动，但没有旋转。
如果你想根据距离给字母增加旋转，你必须在脚本中计算它。但是记住，旋转的中心不是移动后的字母位置，而是原坐标系的原点！其结果是，线性函数随着交叉点的下降而逐渐旋转字母，结合增加的距离，将产生沿 螺旋线 的移动。 （将距离和旋转的组合视为极坐标。）
第二个误解在于 intersectionRatio IntersectionObserver 返回的值。交集 0% 表示对象在 外部 参考，100% 表示在 内部 。因此，如果要在部分可见的情况下“有序”放置字母，则必须计算与交点相反的偏移距离：
let callback = (entries, observer) => {
entries.forEach(element => {
element.target.querySelectorAll("path").forEach(path => {
if (element.isIntersecting) {
if (!pathGenerated) {
const x1 = 0;
const y1 = 0;
const x2 = generateRandomAnimationPathLine();
const y2 = generateRandomAnimationPathLine();
path.style.offsetPath = `path('M ${x1} ${y1} L ${x2} ${y2}')`;
}
path.style.offsetDistance = (1 - element.intersectionRatio) * 100 + "%";
} else {
pathGenerated = false;
path.style.removeProperty("offset-path");
}
});
});
pathGenerated = true;
}
我不得不说，我发现 offset-path 的用法对于您想要实现的目标来说并不理想。对运动路径 CSS 模块的几个属性的支持是不完整的，正如我们所发现的，旋转与路径的关系是 counter-intuitive。 SVG 本身有一种在文本中移动和旋转单个字母的机制，可以在没有任何兼容性问题的情况下执行此操作。这假定您可以使用 <text> 元素而不是转换为路径的字母。
<text> 和 <tspan> 元素接受许多属性，这些属性将 space-separated 数字列表作为参数。第 n 个数字应用于元素内的第 n 个字母：
dx and dy 将每个字母从其呈现的位置移开。转移是累积的。换句话说：第一个字母根据第一个值移位后，第二个字母在移位后的第一个字母旁边渲染，并根据第二个值从 that 位置移位.rotate旋转每个字母，但不累加：每个数字代表偏离其原始方向的旋转。
下面的例子是你笔下的一些缩减，用滑块设置“距离”而不是使用观察者。最大距离和旋转存储在全局对象中。在每次滑块更改时，dx、dy 和 rotate 属性中的值列表将重新计算为最大距离和角度的一部分。由于距离值的累积性质，通过减去前一个字母的偏移量来“重置”每个字母的偏移量。
const offsets = [];
for (let i = 0; i < 11; i++) {
offsets.push({
x: Math.random() * 60 - 30,
y: Math.random() * 60 - 30,
a: Math.random() * 360 - 180
});
}
const text = document.querySelector('.mesg');
document.querySelector('#distance').addEventListener('change', (ev) => {
const dist = parseFloat(ev.target.value);
const attrs = offsets.reduce((attr, o, i) => {
attr.dx.push((i ? o.x - offsets[i-1].x : o.x) * dist);
attr.dy.push((i ? o.y - offsets[i-1].y : o.y) * dist);
attr.rotate.push(o.a * dist);
return attr;
}, {dx: [], dy: [], rotate: []});
for (let [key, value] of Object.entries(attrs)) {
text.setAttribute(key, value.join(" "));
}
})
text {
font-size: 20px;
font-family: sans-serif;
}
<div><input id="distance" type="range" min="0" max="1" step="0.05" value="0"></input></div>
<svg viewBox="0 0 200 100" width="100%" height="150">
<text x="10" y="60" class="mesg">Hello World</text>
</svg>
我有一堆 SVG 路径是文本字母。在滚动时，我想从它们的原始位置开始沿着 offset-path 对它们进行动画处理。所以我给 0x 和 0y 起始位置给 offset-path 属性 然后给随机 Line 给 offset-path 我想沿着它制作 SVG 字母的动画，像这样：
path.setAttribute("style", "offset-path: path('M" + 0 +" " + 0 + " L " + generateRandomAnimationPathLine() + " " + generateRandomAnimationPathLine() + "')");
但是一旦我为所有 SVG 路径 offset-path 赋予随机 L 属性，它们就已经遍布整个屏幕并且 offset-distance 设置为 0%。这是为什么？如果 offset-distance 设置为 0，它们不应该留在原点吗？为什么 offset-path: path() 中的 L 从原点移动 SVG，即使 M 设置为 0？
您可以检查每个 SVG 字母并勾选 offset-distance 以查看它们是否已经超出原点。如何从原始位置开始对 SVG 路径进行动画处理？我正在尝试实现一种效果，当您滚动它时它会慢慢破坏“Hello，World”，当您向上滚动时它会恢复到原始形式。
图像来解释我正在努力实现的目标。当 SVG 在屏幕上时，将 offset-path 设置为随机 Lines/L，我想通过将 offset-distance 从 0% 更改为 100% 来使 SVG 字母从其原始位置开始动画相对于滚动，像这样：
path.style.offsetDistance = element.intersectionRatio * 100 + "%";
实例：https://codepen.io/Limpuls/pen/KKzZWEm
代码：
<section class="row first">
<div class="col-lg-12">
<div class="svg">
<svg viewBox="-145 -90 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26 2V30H19.52V18.52H6.80001V30H0.320007V2H6.80001V13.04H19.52V2H26Z" fill="black"/>
<path d="M53.2647 19.32C53.2647 19.4 53.2247 19.96 53.1447 21H36.8647C37.158 22.3333 37.8514 23.3867 38.9447 24.16C40.038 24.9333 41.398 25.32 43.0247 25.32C44.1447 25.32 45.1314 25.16 45.9847 24.84C46.8647 24.4933 47.678 23.96 48.4247 23.24L51.7447 26.84C49.718 29.16 46.758 30.32 42.8647 30.32C40.438 30.32 38.2914 29.8533 36.4247 28.92C34.558 27.96 33.118 26.64 32.1047 24.96C31.0914 23.28 30.5847 21.3733 30.5847 19.24C30.5847 17.1333 31.078 15.24 32.0647 13.56C33.078 11.8533 34.4514 10.5333 36.1847 9.6C37.9447 8.64 39.9047 8.16 42.0647 8.16C44.1714 8.16 46.078 8.61333 47.7847 9.52C49.4914 10.4267 50.8247 11.7333 51.7847 13.44C52.7714 15.12 53.2647 17.08 53.2647 19.32ZM42.1047 12.88C40.6914 12.88 39.5047 13.28 38.5447 14.08C37.5847 14.88 36.998 15.9733 36.7847 17.36H47.3847C47.1714 16 46.5847 14.92 45.6247 14.12C44.6647 13.2933 43.4914 12.88 42.1047 12.88Z" fill="black"/>
<path d="M57.4191 0.319998H63.6591V30H57.4191V0.319998Z" fill="black"/>
<path d="M69.4503 0.319998H75.6903V30H69.4503V0.319998Z" fill="black"/>
<path d="M91.7216 30.32C89.4549 30.32 87.4149 29.8533 85.6016 28.92C83.8149 27.96 82.4149 26.64 81.4016 24.96C80.3882 23.28 79.8816 21.3733 79.8816 19.24C79.8816 17.1067 80.3882 15.2 81.4016 13.52C82.4149 11.84 83.8149 10.5333 85.6016 9.6C87.4149 8.64 89.4549 8.16 91.7216 8.16C93.9882 8.16 96.0149 8.64 97.8016 9.6C99.5882 10.5333 100.988 11.84 102.002 13.52C103.015 15.2 103.522 17.1067 103.522 19.24C103.522 21.3733 103.015 23.28 102.002 24.96C100.988 26.64 99.5882 27.96 97.8016 28.92C96.0149 29.8533 93.9882 30.32 91.7216 30.32ZM91.7216 25.2C93.3216 25.2 94.6282 24.6667 95.6416 23.6C96.6816 22.5067 97.2016 21.0533 97.2016 19.24C97.2016 17.4267 96.6816 15.9867 95.6416 14.92C94.6282 13.8267 93.3216 13.28 91.7216 13.28C90.1216 13.28 88.8016 13.8267 87.7616 14.92C86.7216 15.9867 86.2016 17.4267 86.2016 19.24C86.2016 21.0533 86.7216 22.5067 87.7616 23.6C88.8016 24.6667 90.1216 25.2 91.7216 25.2Z" fill="black"/>
<path d="M109.819 22.56C110.939 22.56 111.859 22.92 112.579 23.64C113.299 24.3333 113.659 25.2533 113.659 26.4C113.659 26.9333 113.592 27.4667 113.459 28C113.326 28.5333 113.032 29.3333 112.579 30.4L110.299 36.16H106.339L108.099 29.8C107.432 29.5333 106.899 29.1067 106.499 28.52C106.126 27.9067 105.939 27.2 105.939 26.4C105.939 25.2533 106.299 24.3333 107.019 23.64C107.766 22.92 108.699 22.56 109.819 22.56Z" fill="black"/>
<path d="M171.976 2L162.816 30H155.856L149.696 11.04L143.336 30H136.416L127.216 2H133.936L140.256 21.68L146.856 2H152.856L159.256 21.84L165.776 2H171.976Z" fill="black"/>
<path d="M183.792 30.32C181.525 30.32 179.485 29.8533 177.672 28.92C175.885 27.96 174.485 26.64 173.472 24.96C172.459 23.28 171.952 21.3733 171.952 19.24C171.952 17.1067 172.459 15.2 173.472 13.52C174.485 11.84 175.885 10.5333 177.672 9.6C179.485 8.64 181.525 8.16 183.792 8.16C186.059 8.16 188.085 8.64 189.872 9.6C191.659 10.5333 193.059 11.84 194.072 13.52C195.085 15.2 195.592 17.1067 195.592 19.24C195.592 21.3733 195.085 23.28 194.072 24.96C193.059 26.64 191.659 27.96 189.872 28.92C188.085 29.8533 186.059 30.32 183.792 30.32ZM183.792 25.2C185.392 25.2 186.699 24.6667 187.712 23.6C188.752 22.5067 189.272 21.0533 189.272 19.24C189.272 17.4267 188.752 15.9867 187.712 14.92C186.699 13.8267 185.392 13.28 183.792 13.28C182.192 13.28 180.872 13.8267 179.832 14.92C178.792 15.9867 178.272 17.4267 178.272 19.24C178.272 21.0533 178.792 22.5067 179.832 23.6C180.872 24.6667 182.192 25.2 183.792 25.2Z" fill="black"/>
<path d="M205.723 11.32C206.469 10.28 207.469 9.49333 208.723 8.96C210.003 8.42667 211.469 8.16 213.123 8.16V13.92C212.429 13.8667 211.963 13.84 211.723 13.84C209.936 13.84 208.536 14.3467 207.523 15.36C206.509 16.3467 206.003 17.84 206.003 19.84V30H199.763V8.48H205.723V11.32Z" fill="black"/>
<path d="M216.833 0.319998H223.073V30H216.833V0.319998Z" fill="black"/>
<path d="M250.784 0.319998V30H244.824V27.52C243.278 29.3867 241.038 30.32 238.104 30.32C236.078 30.32 234.238 29.8667 232.584 28.96C230.958 28.0533 229.678 26.76 228.744 25.08C227.811 23.4 227.344 21.4533 227.344 19.24C227.344 17.0267 227.811 15.08 228.744 13.4C229.678 11.72 230.958 10.4267 232.584 9.52C234.238 8.61333 236.078 8.16 238.104 8.16C240.851 8.16 242.998 9.02667 244.544 10.76V0.319998H250.784ZM239.184 25.2C240.758 25.2 242.064 24.6667 243.104 23.6C244.144 22.5067 244.664 21.0533 244.664 19.24C244.664 17.4267 244.144 15.9867 243.104 14.92C242.064 13.8267 240.758 13.28 239.184 13.28C237.584 13.28 236.264 13.8267 235.224 14.92C234.184 15.9867 233.664 17.4267 233.664 19.24C233.664 21.0533 234.184 22.5067 235.224 23.6C236.264 24.6667 237.584 25.2 239.184 25.2Z" fill="black"/>
</svg>
</div>
</div>
</section>
JS:
let thresholdArray = []
for (let i = 10; i < 100; i += 1){
thresholdArray.push(i / 100);
}
let options = {
root: null,
rootMargin: "20px",
threshold: thresholdArray
};
let pathGenerated = false;
let callback = (entries, observer) => {
entries.forEach(element => {
element.target.querySelectorAll("path").forEach(path => {
if (element.isIntersecting) {
if (!pathGenerated) {
path.setAttribute("style", "offset-path: path('M" + 0 +" " + 0 + " L " + generateRandomAnimationPathLine() + " " + generateRandomAnimationPathLine() + "')");
}
path.style.offsetDistance = element.intersectionRatio * 100 + "%";
} else {
pathGenerated = false;
path.style.removeProperty("offset-path");
}
});
});
pathGenerated = true;
}
let generateRandomAnimationPathLine = (element) => {
return Math.floor(Math.random() * Math.floor(100));
}
let observer = new IntersectionObserver(callback, options);
document.querySelectorAll('section').forEach(section => {
console.log(section)
observer.observe(section);
});
有两个误解。第一个涉及 offset-path 的工作方式。如果您定义了移动字母的路径，则可以使用移动坐标系完成此操作：
- 坐标系原点移动到
offset-distance所指路径上的点。 - 如果 属性
offset-rotate没有其他设置，坐标系会旋转 automatically 使得 x-axis 沿着路径的切线指向当前使用的点。 - 然后，在移动和旋转的坐标系中绘制字母。
与您上面的图片所暗示的相反，这些字母并没有随着距离的增加而从它们的原始位置移开，它们中的每一个总是与它的原点有一段距离未移动坐标系，沿偏移路径旋转移动。 （由于每个路径都有一个单独的偏移路径，这意味着每个字母都有一个单独的坐标系。）
从某种意义上说，对于你的直线，应用旋转 before 甚至有一个很小的距离，这就是为什么字母到处都是的原因。
一旦设置
path {
offset-rotate: 0deg;
}
坐标系的旋转被抑制，在offset-distance: 0处字母显示在它们原来的位置。对于更远的距离，它们仍然朝不同的方向移动，但没有旋转。
如果你想根据距离给字母增加旋转，你必须在脚本中计算它。但是记住，旋转的中心不是移动后的字母位置，而是原坐标系的原点！其结果是，线性函数随着交叉点的下降而逐渐旋转字母，结合增加的距离，将产生沿 螺旋线 的移动。 （将距离和旋转的组合视为极坐标。）
第二个误解在于 intersectionRatio IntersectionObserver 返回的值。交集 0% 表示对象在 外部 参考，100% 表示在 内部 。因此，如果要在部分可见的情况下“有序”放置字母，则必须计算与交点相反的偏移距离：
let callback = (entries, observer) => {
entries.forEach(element => {
element.target.querySelectorAll("path").forEach(path => {
if (element.isIntersecting) {
if (!pathGenerated) {
const x1 = 0;
const y1 = 0;
const x2 = generateRandomAnimationPathLine();
const y2 = generateRandomAnimationPathLine();
path.style.offsetPath = `path('M ${x1} ${y1} L ${x2} ${y2}')`;
}
path.style.offsetDistance = (1 - element.intersectionRatio) * 100 + "%";
} else {
pathGenerated = false;
path.style.removeProperty("offset-path");
}
});
});
pathGenerated = true;
}
我不得不说，我发现 offset-path 的用法对于您想要实现的目标来说并不理想。对运动路径 CSS 模块的几个属性的支持是不完整的，正如我们所发现的，旋转与路径的关系是 counter-intuitive。 SVG 本身有一种在文本中移动和旋转单个字母的机制，可以在没有任何兼容性问题的情况下执行此操作。这假定您可以使用 <text> 元素而不是转换为路径的字母。
<text> 和 <tspan> 元素接受许多属性，这些属性将 space-separated 数字列表作为参数。第 n 个数字应用于元素内的第 n 个字母：
dxanddy将每个字母从其呈现的位置移开。转移是累积的。换句话说：第一个字母根据第一个值移位后，第二个字母在移位后的第一个字母旁边渲染，并根据第二个值从 that 位置移位.rotate旋转每个字母，但不累加：每个数字代表偏离其原始方向的旋转。
下面的例子是你笔下的一些缩减，用滑块设置“距离”而不是使用观察者。最大距离和旋转存储在全局对象中。在每次滑块更改时，dx、dy 和 rotate 属性中的值列表将重新计算为最大距离和角度的一部分。由于距离值的累积性质，通过减去前一个字母的偏移量来“重置”每个字母的偏移量。
const offsets = [];
for (let i = 0; i < 11; i++) {
offsets.push({
x: Math.random() * 60 - 30,
y: Math.random() * 60 - 30,
a: Math.random() * 360 - 180
});
}
const text = document.querySelector('.mesg');
document.querySelector('#distance').addEventListener('change', (ev) => {
const dist = parseFloat(ev.target.value);
const attrs = offsets.reduce((attr, o, i) => {
attr.dx.push((i ? o.x - offsets[i-1].x : o.x) * dist);
attr.dy.push((i ? o.y - offsets[i-1].y : o.y) * dist);
attr.rotate.push(o.a * dist);
return attr;
}, {dx: [], dy: [], rotate: []});
for (let [key, value] of Object.entries(attrs)) {
text.setAttribute(key, value.join(" "));
}
})
text {
font-size: 20px;
font-family: sans-serif;
}
<div><input id="distance" type="range" min="0" max="1" step="0.05" value="0"></input></div>
<svg viewBox="0 0 200 100" width="100%" height="150">
<text x="10" y="60" class="mesg">Hello World</text>
</svg>