大佬教程收集整理的这篇文章主要介绍了css3 – SVG stroke-dasharray偏移不一致，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
动画本身效果很好,但圆圈中每个点之间的偏移量不一致.当动画完成时,这是明显的,有些点跳回来.如果他们都是一致的,那么在我的计算中会出现错误,但同一个圆圈上的圆点会跳出不同的数量,这意味着它们会以不同的量开始偏移.在他的答案结束的例子中,Vals也显示出这种不一致的抵消
这是每个圆圈的设置方式.通过使用公式间隔=(半径×2)×3.14159265÷numberOfCircles来确定每个点之间的间距. .001是让Chrome看到点
<circle cx="30" cy="30" r="radius" stroke-dasharray="0.001,spacing" stroke="color"/>
任何人都可以帮我修复这个SVG渲染偏移错误？
编辑
阀门和尖叫声都提供了奇妙的工作替代解决方案的问题.但是,如果可能的话,我仍然希望实际修复偏移/渲染问题
第一个是你的点的间距是2个参数与stroke-dash数组的总和.由于第一个参数始终为0.001,所以第二个参数应该是您的公式的结果减去0.001.
第二个是你在圈子周围放置36个点.从点到点的角度为10度.所以,你的动画应该具体10deg,20deg,30deg的系列,而不是15deg 30deg 45deg …在每个循环结束时创造5度的跳跃.
我认为我有或多或少的工作
最初的旋转也是一个问题;我希望现在是你想要的.
而且,由于svg的体积小,有一些圆形的;将其设置为600平方米,效果更好.
我还在10度加了一条线,以检查点的正确对齐.
CSS
body { BACkground: black; padding: 0; margin: 0; } circle { fill: none; stroke-width: 10; stroke-linecap: round; } circle { -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite;} circle:nth-child(2) { -webkit-animation-name:second; -moz-animation:second 3s ease-in-out infinite; animation:second 3s ease-in-out infinite;} circle:nth-child(3) { -webkit-animation-name:third; -moz-animation:third 3s ease-in-out infinite; animation:third 3s ease-in-out infinite; } circle:nth-child(4) { -webkit-animation-name:fourth; -moz-animation:fourth 3s ease-in-out infinite; animation:fourth 3s ease-in-out infinite; } circle:nth-child(5) { -webkit-animation-name:fifth; -moz-animation:fifth 3s ease-in-out infinite; animation:fifth 3s ease-in-out infinite; } circle:nth-child(6) { -webkit-animation-name:sixth; -moz-animation:sixth 3s ease-in-out infinite; animation:sixth 3s ease-in-out infinite; } circle:nth-child(7) { -webkit-animation-name:seventh; -moz-animation:seventh 3s ease-in-out infinite; animation:seventh 3s ease-in-out infinite; } circle:nth-child(8) { -webkit-animation-name:eighth; -moz-animation:eighth 3s ease-in-out infinite; animation:eighth 3s ease-in-out infinite; } circle:nth-child(9) { -webkit-animation-name:ninth; -moz-animation:ninth 3s ease-in-out infinite; animation:ninth 3s ease-in-out infinite; } circle:nth-child(10) { -webkit-animation-name:tenth; -moz-animation:tenth 3s ease-in-out infinite; animation:tenth 3s ease-in-out infinite; -webkit-transform: rotate(10deg);} @-webkit-keyframes second { 0% { -webkit-transform:rotate(5deg) } 100% { -webkit-transform:rotate(15deg) } } @-webkit-keyframes third { 100% { -webkit-transform:rotate(20deg) } } @-webkit-keyframes fourth { 0% { -webkit-transform:rotate(5deg) } 100% { -webkit-transform:rotate(35deg) } } @-webkit-keyframes fifth { 100% { -webkit-transform:rotate(40deg) } } @-webkit-keyframes sixth { 0% { -webkit-transform:rotate(5deg) } 100% { -webkit-transform:rotate(55deg) } } @-webkit-keyframes seventh {100% { -webkit-transform:rotate(60deg) } } @-webkit-keyframes eighth { 0% { -webkit-transform:rotate(5deg) } 100% { -webkit-transform:rotate(75deg) } } @-webkit-keyframes ninth { 0% { -webkit-transform:rotate(0deg) } 100% { -webkit-transform:rotate(80deg) } } @-webkit-keyframes tenth { 0% { -webkit-transform:rotate(5deg) } 100% { -webkit-transform:rotate(95deg) } } @-moz-keyframes second { 0% { -moz-transform:rotate(5deg) } 100% { -moz-transform:rotate(15deg) } } @-moz-keyframes third { 100% { -moz-transform:rotate(20deg) } } @-moz-keyframes fourth { 0% { -moz-transform:rotate(5deg) } 100% { -moz-transform:rotate(35deg) } } @-moz-keyframes fifth { 100% { -moz-transform:rotate(40deg) } } @-moz-keyframes sixth { 0% { -moz-transform:rotate(5deg) } 100% { -moz-transform:rotate(55deg) } } @-moz-keyframes seventh { 100% { -moz-transform:rotate(60deg) } } @-moz-keyframes eighth { 0% { -moz-transform:rotate(5deg) } 100% { -moz-transform:rotate(75deg) } } @-moz-keyframes ninth { 100% { -moz-transform:rotate(80deg) } } @-moz-keyframes tenth { 0% { -moz-transform:rotate(5deg) } 100% { -moz-transform:rotate(95deg) } } line { stroke-width: 1; -webkit-transform-origin: left center; -webkit-transform: rotate(-10deg); }
并且还优化了一些样式
那么在经历了很多时间花在这个问题上之后,我几乎可以肯定某种类型的四舍五入/精确度有一些错误.
我已经完全改变了这个想法,以避免这个问题.目标是在结束动画之前让圈子做出圆圈,以便动画的开始和结束始终保持同步.
既然生成了一个巨大的关键帧风格,我想重用它;为了达到这个目的,我以嵌套的方式对圈子进行了分组;并将动画应用于每个组：
HTML
<svg viewBox="0 0 60 60">
<g class="g">
<circle cx="30" cy="30" r="10" stroke-dasharray="0.001,1.745" stroke="hsl(120,100%,50%)"/>
<g class="g">
<circle cx="30" cy="30" r="12" stroke-dasharray="0.001,2.094" stroke="hsl(108,50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="14" stroke-dasharray="0.001,2.443" stroke="hsl(96,50%)"/>
<g class="g">
<circle cx="30" cy="30" r="16" stroke-dasharray="0.001,2.793" stroke="hsl(84,50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="18" stroke-dasharray="0.001,3.142" stroke="hsl(72,50%)"/>
<g class="g">
<circle cx="30" cy="30" r="20" stroke-dasharray="0.001,3.491" stroke="hsl(60,50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="22" stroke-dasharray="0.001,3.840" stroke="hsl(48,50%)"/>
<g class="g">
<circle cx="30" cy="30" r="24" stroke-dasharray="0.001,4.189" stroke="hsl(36,50%)" class="c2"/>
<g class="g">
<circle cx="30" cy="30" r="26" stroke-dasharray="0.001,4.538" stroke="hsl(24,50%)"/>
<g class="g">
<circle cx="30" cy="30" r="28" stroke-dasharray="0.001,4.887" stroke="hsl(12,50%)" class="c2"/>
</g></g></g></g></g></g></g></g></g></g>
</svg>
(是的,回到低分辨率！)
CSS
body { BACkground: black; padding: 0; margin: 0; } circle { fill: none; stroke-width: 1; stroke-linecap: round; } .g { -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-animation-duration: 108s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-name: anim; -moz-animation:second 3s ease-in-out infinite; animation:second 3s ease-in-out infinite;} .c2 { -webkit-transform-origin: center center; -webkit-transform: rotate(5deg); } @-webkit-keyframes anim { 0% { -webkit-transform:rotate(0deg)} 2.778% { -webkit-transform:rotate(10deg)} 5.56% { -webkit-transform:rotate(20deg)} 8.33% { -webkit-transform:rotate(30deg)} 11.11% { -webkit-transform:rotate(40deg)} 13.89% { -webkit-transform:rotate(50deg)} 16.67% { -webkit-transform:rotate(60deg)} 19.44% { -webkit-transform:rotate(70deg)} 22.22% { -webkit-transform:rotate(80deg)} 25% { -webkit-transform:rotate(90deg)} 27.78% { -webkit-transform:rotate(100deg)} 30.56% { -webkit-transform:rotate(110deg)} 33.33% { -webkit-transform:rotate(120deg)} 36.11% { -webkit-transform:rotate(130deg)} 38.89% { -webkit-transform:rotate(140deg)} 41.67% { -webkit-transform:rotate(150deg)} 44.44% { -webkit-transform:rotate(160deg)} 47.22% { -webkit-transform:rotate(170deg)} 50% { -webkit-transform:rotate(180deg)} 52.78% { -webkit-transform:rotate(190deg)} 55.56% { -webkit-transform:rotate(200deg)} 58.33% { -webkit-transform:rotate(210deg)} 61.11% { -webkit-transform:rotate(220deg)} 63.89% { -webkit-transform:rotate(230deg)} 66.67% { -webkit-transform:rotate(240deg)} 69.44% { -webkit-transform:rotate(250deg)} 72.22% { -webkit-transform:rotate(260deg)} 75% { -webkit-transform:rotate(270deg)} 77.78% { -webkit-transform:rotate(280deg)} 80.56% { -webkit-transform:rotate(290deg)} 83.33% { -webkit-transform:rotate(300deg)} 86.11% { -webkit-transform:rotate(310deg)} 88.89% { -webkit-transform:rotate(320deg)} 91.67% { -webkit-transform:rotate(330deg)} 94.44% { -webkit-transform:rotate(340deg)} 97.22% { -webkit-transform:rotate(350deg)} 100% { -webkit-transform:rotate(360deg)} }
和new demo(对不起,只有webkit)
这是我尝试调查错误.我改变了系统,而不是动画,我有2组圈,一个是彩色的,另一个是黑色,旋转了10度.颜色圈不应显示;偏移是偏离误差的度量. (可能需要滚动查看圈子
以上是大佬教程为你收集整理的css3 – SVG stroke-dasharray偏移不一致全部内容，希望文章能够帮你解决css3 – SVG stroke-dasharray偏移不一致所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。