我想創建一個 svg，它有一個點沿著矩形折線路徑移動并切掉一個角。現在我有一些這樣的作品，但出于某種原因，經過幾次之后，它有點緊張和重置。svg 來自在 Illustrator 中嘗試創建它們。非常感謝修復抖動/重置的任何幫助。
.dot {
filter: blur(0.3px);
stroke-dasharray: 10 400;
animation-name: dash;
animation-duration: 20000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1000;
}
}<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<polyline class="st0 dot" points="353.24,507.95 387.74,507.45 387.74,283.45 223.74,283.45 224.24,445.95 "/>
</svg>
</body>
</html>uj5u.com熱心網友回復：
這是一個非常巧妙的主意，所以我一直在玩弄它，我不知道為什么，但是如果您使引數彼此成倍數，則大部分抖動似乎都消除了......？不過，我的理由真的沒有押韻，所以這可能只是偶然的運氣，或者我可能只是看到了一些特定于瀏覽器的行為。仍然有一個小問題，它似乎確實以與您的 OP 中的那個頻率相同的頻率發生，只是沒有那么戲劇化。
編輯 - 洗掉了 codepen 鏈接，不知道為什么，但它只是一直鏈接到默認的空白 codepen。我的一些 css 更改都在下面，但是
我知道，沒有解釋就沒有太多答案。并且您不能隨意更改引數的原因可能有很多，但是唉……發表評論太長了：p
.dot {
filter: blur(0.3px);
stroke-dasharray: 10 400;
animation-name: dash;
animation-duration: 4000ms;
stroke-dashoffset: 0;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 400;
}
}
uj5u.com熱心網友回復：
您stroke-dasharray創建了一個 10 像素的筆劃，然后是 400 像素的間隙，從而形成一個410像素長的圖案，并一遍又一遍地重復。因此，為了避免抖動，您的影片必須在重新開始之前將模式偏移 410 像素：
stroke-dashoffset: 410;
.dot {
filter: blur(0.3px);
stroke-dasharray: 10 400;
animation-name: dash;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 410;
}
}<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="200 250 300 300">
<style type="text/css">
.st0{fill:none;stroke:#010101;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<polyline class="st0 dot" points="353.24,507.95 387.74,507.45 387.74,283.45 223.74,283.45 224.24,445.95 "/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/366642.html