主页 / 问题 / 751443
Accepted
YourDeveloper
Asked:2020-11-30 00:48:04 +0000 UTC2020-11-30 00:48:04 +0000 UTC

svg的平滑渲染？

  • 772

我想在页面加载时平滑绘制svg，但问题是圆圈不同（截图显示我们需要不同的线长），我不知道页面加载时需要对哪个属性进行动画处理。

http://prntscr.com/hgvqjf和 http://prntscr.com/hgvqq5

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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 378 381" style="enable-background:new 0 0 378 381;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#003D90;stroke-width:2;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="189" cy="190.5" r="183"/>
</svg>

javascript

2 个回答

  1. 许多人，显然是因为 Chris Coyier 在 css-tricks 上的例子，把stroke-dasharray="1000"它什么时候工作，什么时候不工作。问题是必须准确计算动画线的长度。例如，对于半径为 的圆100px，周长将是 -2*3.14*100= 628px这是计算的值，必须代入stroke-dasharray和stroke-dashoffset。

    SVG 解决方案

    动画在悬停时开始

    <svg id="svg2" width="400" height="400" viewBox="0 0 400 400">

  <circle  id="back" cx="120" cy="120" r="100" fill="none" stroke="#d5d5d5" stroke-width="5"/>
  <circle transform="rotate(-90 120 120)" id="shape" cx="120" cy="120" r="100" stroke-width="5" stroke-dasharray='628' stroke-dashoffset='628' stroke="red" fill="none">
  <animate attributeName="stroke-dashoffset" from="628" to="0" dur="4s" begin="svg2.mouseover" restart="whenNotActive" />
  </circle>
  
</svg>

    CSS 解决方案

    一切都被风格带走，只有圆圈留在svg中。 

    #back{
stroke:red;
stroke-width:5;
fill:none;
stroke:#d5d5d5;

}
#shape {
stroke-dashoffset:628;
stroke-dasharray:628;
stroke:red;
stroke-width:5;
fill:none;
animation: circle_stroke 4s ease-in forwards;
}
@keyframes circle_stroke {
    0% {
    stroke-dashoffset: 628;
    }
    100% {
    stroke-dashoffset: 0;
      }
    } 
    <svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
  <circle  id="back" cx="120" cy="120" r="100" />
  <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100"  />

</svg>

    半圈

    我重复从零到全长画一条线的原理：当stroke-dashoffset从最大值（628）减少到零时，这条线将从零画到全长。但是我们只需要画一半以上的圆，所以我们会stroke-dashoffset从减少628px到314px 

    <style>

#shape {
stroke-dashoffset:314;
stroke-dasharray:628;
stroke:red;
stroke-width:5;
fill:none;
animation: circle_stroke 4s ease-in forwards;
}
@keyframes circle_stroke {
    0% {
    stroke-dashoffset: 628;
    }
    100% {
    stroke-dashoffset: 314;
      }
    } 

</style>
<svg id="svg2" width="400" height="400" viewBox="0 0 400 400">
    <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100"  />

</svg>

    • 3
  2. Best Answer

    stroke-dasharray和 stroke-dashoffset https://codepen.io/MaffooBristol/pen/zKwoAZ

    • 2

相关问题