我正在嘗試svg 元素animate的stroke-dashoffset屬性如下
const svg = document.querySelector("svg");
//const svgns = "http://www.w3.org/2000/svg"
var ln = document.querySelector('.ln');
var path = ln.getTotalLength();
ln.style.setProperty("--off", path 'px');
svg.appendChild(ln);.ln {
stroke-dashoffset: var(--off);
stroke-dasharray: 13;
animation: effect 4s linear infinite;
}
@keyframes effect {
100% {
stroke-dashoffset: 0px;
}
}<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="style.css"></link>
<svg id="layer" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<rect class="boundary" x="100" y="100" height="100" width="130" fill="none" stroke="blue"></rect>
<line class="ln" x1="100" y1="150" x2="230" y2="150" stroke = "grey" stroke-width="2" />
<script href="index.js"></script>
</svg>
</body>
</html>這個影片的一個重要部分是stroke-dasharray值。
我已經意識到，基于該欄位的值，影片可以感覺無縫或不無縫。
例如，像5 and 13影片這樣的值感覺是無縫的。對于任何其他值，影片都是跳躍的。
另外，我意識到 5 和 13 分別產生
破折號正好從左邊開始，沒有任何殘留物，而不是
stroke-dasharray =6, 10什么
我如何計算不同長度的值，這將使線條從左邊開始，沒有殘留，會產生無縫的感覺，而不是通過無休止的反復試驗找到它？exact and safest stroke-dasharraypath
uj5u.com熱心網友回復：
我已經想通了。
讓我們假設path length=120px和stroke-dasharray=10px。
stroke-dasharray=10創建一個10px wide dash 10px wide gap這樣的
如果total path length divided by each (dash gap)（在這種情況下為 20px）returns 0；這意味著所有元素（120 px/每個 stoke-dasharray 的 10px *2[dash gap]）= 6 組（6 dash 6 個間隙）可以完美匹配。如果除法回傳余數，則該dash array值不會導致元素的完美契合。
有了這些知識，邏輯就可以傳給js去拉字串了
const svg = document.querySelector("svg");
const svgns = "http://www.w3.org/2000/svg";
var x = 100;
var y = 100;
var height = 100;
var width = 120;
var midHeight = height / 2;
let boundary = document.createElementNS(svgns, 'rect');
boundary.setAttribute("x", x);
boundary.setAttribute("y", y);
boundary.setAttribute("height", height);
boundary.setAttribute("width", width);
boundary.setAttribute("fill", "none");
boundary.setAttribute("stroke", "blue");
svg.appendChild(boundary);
let line = document.createElementNS(svgns, 'line');
line.setAttribute("class", "ln")
line.setAttribute("x1", x);
line.setAttribute("x2", x width);
line.setAttribute("y1", x midHeight);
line.setAttribute("y2", x midHeight);
line.setAttribute("stroke", "grey");
line.setAttribute("stroke-width", "2");
svg.appendChild(line);
var ln = document.querySelector('.ln');
var path = ln.getTotalLength();
var halfPath = path / 2;
var possibleNumbers = [];
for (var i = 0; i < halfPath; i ) {
(halfPath % i) == 0 && (i != 1) ? possibleNumbers.push(i) : 0
};
ln.style.setProperty("--off", path 'px');
ln.style.setProperty("--arr", possibleNumbers[5] 'px');
svg.appendChild(ln);.ln {
stroke-dashoffset: var(--off);
stroke-dasharray: var(--arr);
animation: effect 1s linear infinite;
}
@keyframes effect {
100% {
stroke-dashoffset: 0px;
}
}<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="style.css"></link>
<svg id="layer" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<script href="index.js"></script>
</svg>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443684.html
標籤：javascript css svg css-animations stroke-dasharray
上一篇：D3餅圖未回傳正確資料