SVG圆起点答案

【问题标题】：SVG circle starting pointSVG圆起点
【发布时间】：2015-05-18 01:14:17
【问题描述】：

如何更改 svg 圆的起点以使其从 0 点开始逐步设置动画？默认圆形 svg 从 3 点开始。

我当前的圈子（悬停动画）：

#timeline{
	position:fixed;
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	overflow:hidden;
	pointer-events: all;
	z-index:99999;
}

#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}


#bluecircle:hover{
	stroke-dashoffset:0;
}

<div id="timeline">
  
  <svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
    
    <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
    
    <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>

【问题讨论】：

标签： javascript css svg rotation geometry

【解决方案1】：

用变换旋转圆？

#timeline{
	position:fixed;
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-250px;
	overflow:hidden;
	pointer-events: all;
	z-index:99999;
}

#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}


#bluecircle:hover{
	stroke-dashoffset:0;
}

<div id="timeline">

<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
    <circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
    
    <circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
</svg>

编辑：用 CSS 更新

【讨论】：

知道如何让动画在滚动上逐步播放吗？实际上我有 4 个部分，所以我只希望在第 2 部分中的蓝色圆圈为 25%，第 3 = 50% 第 4 = 75% ...我使用整页 js 脚本，使每个部分在窗口的 100%，所以主体处于溢出隐藏状态
@user2994359 你能解释一下使用 dash-dashoffset 背后的原因吗？
确保您在 iOS 设备和桌面设备上进行测试。根据规范w3.org/TR/SVG/shapes.html#CircleElement，一些从 0300 开始渲染圆，但一些 (ios) 设备从 1200 开始。解决方案：在路径中使用两个半圆弧而不是圆。