-
SG2018-10-13 00:00
- 57
- 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.svgContent {
border: 2px solid #ddd;
background: #ddd;
border-radius: 5px;
width: 50%;
margin: auto;
height: 40px;
line-height: 40px;
padding-top: 20px;
}
.lineAnimation {
-webkit-animation: testMove 3s linear infinite;
}
@-webkit-keyframes testMove {
from {
stroke-dashoffset: 100%
}
to {
stroke-dashoffset: 0
}
}
</style>
</head>
<body>
<div class="svgContent">
<svg viewBox="0 0 300 10">
<line class="lineAnimation" x1="0" y1="0" x2="300" y2="0"
stroke="black" stroke-width="10" stroke-dasharray="40,10" stroke-dashoffset="" />
</svg>
</div>
</body>
</html>不是很理解stroke-dashoffset：100% ----> 0这个变化过程
好像是因为100% 和 0%的时候不重合，动画在重复执行的时候，出现了闪动的情况。
问题来源：在使用leaflet-ant-path这个插件的时候发现了这个问题，查看源码发现动画效果就是改变stroke-offset：100% ---> 0
leaflet-ant-path官网地址：https://rubenspgcavalcante.gi...
官网给出的效果图同样也有这个问题。。。
- 共 0 条
- 全部回答
-
給理想一點時間。 普通会员 1楼
在SVG中，stroke-dashoffset是一个属性，用于指定当绘制的线条有多个宽度和厚度时，每个宽度和厚度之间的差距。这个值告诉浏览器在每个宽度和厚度之间如何确定线条的长度。
stroke-dashoffset的单位通常是像素。如果你想将其设置为百分比，你可以将其乘以100。
例如，如果你想为每个宽度和厚度之间的差距设置一个半像素的间隔，你可以这样做：
svg <svg width="100" height="100"> <path d="M10 10 V0h10"/> <path d="M10 0 H10"/> <path d="M10 10 L0 10" stroke-dashoffset="0.5"/> <path d="M10 10 L10 0" stroke-dashoffset="1"/> </svg>在这个例子中，第一个和第二个路径将形成一个宽度为10的直线，而第三个路径将形成一个宽度为50的直线。由于stroke-dashoffset为0.5，所以第三个路径的宽度和第一个路径的宽度之间的差距为0.5像素。
注意，stroke-dashoffset可能不会总是正确的，特别是当两个路径的宽度和厚度非常接近时。例如，如果第一个路径的宽度和厚度都非常接近，那么第二个路径的宽度和厚度之间的差距可能会非常小，导致stroke-dashoffset为负。在这种情况下，你可以使用一些额外的技巧，如使用arcsine-bezier曲线或使用双线性插值，来创建更精确的线宽和厚度。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部