CSS3 能实现很好看的按钮动画效果，SVG 也可以实现。今天为大家分享一款基于 SVG 实现的3个选项切换按钮（滑块按钮）。
这是一款比较特别的开关切换按钮，与之前分享的很多CSS3开关切换按钮不同，这款是基于SVG和HTML5的，它的最大特点在于可以提供3个选项切换动画。
滑块能提供“是”或者“否”的选项，但本案例可以提供“是”、“可能是”和“否”3个选项的选择，同时不同状态的选项也会对应不同的小图标。
在开始之前，我们先看看最终效果：
相关实现代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SVG选项切换开关按钮DEMO演示</title>
<type="text/css">
body{background: #1e2730;color:linen; font-family: verdana}
svg {
width: 10em;
/*border: 1px solid #d9d9d9;*/
}
path{fill:linen;}
#wrapper{
width: 10em;
margin: 30px auto;
}
#buttons{text-align:center; margin:1em;}
#base{fill:linen}
#_bgCircle{fill:#1e2730;}
</style>
</head>
<body>
<div id="wrapper">
<svg id="svg" viewBox="-1 -1 167.217 85.619">
<defs>
<g id="yes">
<!--<circle id="bgyes" cx="42.658" cy="41.774" r="38.86"/>-->
<path id="bgyes" class="bg" d="M3.798,41.774C3.798,20.312 21.196, 2.914 42.658, 2.914 C64.12,2.914 81.518, 20.312 81.518, 41.774 C81.518,63.236 64.12, 80.634 42.658, 80.634C21.196214622772004,80.634 3.798, 63.235785377228 3.798, 41.774z"/>
<path id="hidden_dot" d="M26.891,60.777C26.891 60.477 26.971 60.196 27.111 59.954 C27.253 59.708 27.457 59.502 27.701 59.358 C27.946 59.212 28.233 59.129 28.539 59.129 C28.807 59.129 29.059 59.193 29.282 59.306 C29.607 59.471 29.871 59.741 30.028 60.071 C30.130 60.285 30.187 60.524 30.187 60.778 C30.187 61.090 30.100 61.382 29.950 61.630 C29.799 61.880 29.584 62.086 29.327 62.226 C29.093 62.353 28.825 62.426 28.540 62.426 C28.231 62.426 27.941 62.341 27.694 62.192 C27.438 62.039 27.227 61.817 27.086 61.553 C26.961,61.322,26.891,61.058,26.891,60.777 z"/>
<path id="ok" d="M12.427,48.296 C12.427 48.296 14.779 47.296 18.129 53.626 C21.480 59.956 24.775 69.908 24.775 69.908 C24.775, 69.908 25.426 68.774 28.778 66.540 C32.129 64.306 34.569 63.877 34.569 63.877 C34.569, 63.877 40.413 47.939 47.488 38.630 C54.562 29.322 69.084 17.779 69.084 17.779 C69.084, 17.779 67.595 16.661 66.850 15.545 C66.105,14.43,50.439,26.47,42.759,34.788 C35.123 43.059 27.981 55.690 27.981 55.690 C27.981, 55.690 25.557 45.668 22.542 44.590 C18.395,43.108,12.427,48.296,12.427,48.296 z"/>
</g>
<g id="no">
<!--<circle id="bgno" cx="122.857" cy="41.774" r="38.86"/>-->
<path id="bgno" class="bg" d="M83.997,41.774 C83.997,20.312 101.395, 2.914 122.857, 2.914 C144.31878537722798,2.914 161.717, 20.312 161.717, 41.774 C161.717,63.236 144.319, 80.634 122.857, 80.634 C101.395 ,80.634 83.997, 63.236 83.997, 41.774z"/>
<path id="V" d="M113.034,16.209 C113.034 16.209 113.700 21.334 116.430 25.994 C119.160, 30.654 121.422 34.648 121.422 34.648 C121.422, 34.648 124.550 30.254 128.878 25.428 C133.204 20.602 138.263 16.541 139.262 16.541 C140.261, 16.541 145.786 23.530 145.654 24.662 C145.520 25.794 137.332 32.517 134.004 35.645 C130.676, 38.773 125.119 46.129 121.362 46.164 C119.231 46.184 112.703 36.577 111.105 34.048 C109.507 31.518 106.111 25.993 106.378 24.063 C106.644 22.132 107.110 20.801 109.041 19.137 C110.972,17.474,113.034,16.209,113.034,16.209 z"/>
<path id="A" d="M121.03,40.64 C125.660 40.640 127.490 47.001 132.676 50.889 C134.566 52.306 142.042 56.964 145.655 55.552 C146.647 55.164 144.520 59.679 142.790 61.943 C141.060 64.206 140.061 65.538 138.663 65.471 C137.265 65.405 132.936 62.742 129.609 59.480 C126.282 56.218 123.019 51.026 122.288 51.092 C121.556 51.159 119.358 55.153 117.694 57.749 C116.030 60.345 113.300 65.538 112.635 65.804 C111.969 66.070 109.106 64.872 107.309 63.341 C105.512, 61.810 102.649 59.214 102.516 57.816 C102.383, 56.418 107.021 53.499 109.646 50.694 C115.907,44.001,115.708,40.64,121.03,40.64 z"/>
</g>
<g id="maybe">
<!--<circle id="bgmaybe" cx="82.758" cy="41.774" r="38.86"/>-->
<path id="bgmaybe" class="bg" d="M43.898,41.774 C43.898,20.312 61.296, 2.914 82.758, 2.914 C104.22,2.914 121.618, 20.312 121.618, 41.774 C121.618,63.235 104.22, 80.634 82.758, 80.634 C61.296,80.634 43.898, 63.236 43.898, 41.774z" />
<path id="upper" d="M88.13,27.429 C84.664 21.203 73.485 30.225 72.153 30.025 C70.822 29.826 67.094 24.567 67.094 22.703 C67.094, 20.839 77.345 13.983 84.535 14.316 C87.494 14.453 91.245 14.667 94.238 16.113 C98.516 18.180 101.588 22.256 101.509 27.896 C101.376 37.481 89.261 42.807 87.797 45.803 C86.332 48.799 87.997 50.130 87.198 50.995 C86.399 51.860 83.803 52.659 82.205 52.526 C80.607 52.393 77.944 52.326 77.279 51.594 C76.613 50.862 76.281 45.936 77.146 43.340 C78.011,40.743,91.724,33.886,88.13,27.429 z"/>
<path id="dot" d="M75.349,63.578 C75.349 62.379 75.669 61.255 76.228 60.286 C76.796 59.303 77.610 58.480 78.586 57.903 C79.568 57.321 80.714 56.988 81.938 56.988 C83.007 56.988 84.015 57.242 84.907 57.694 C86.210 58.353 87.264 59.431 87.892 60.751 C88.300 61.608 88.528 62.566 88.528 63.579 C88.528 64.826 88.181 65.992 87.579 66.987 C86.975 67.986 86.113 68.811 85.086 69.370 C84.151 69.879 83.079 70.169 81.938 70.169 C80.701 70.169 79.543 69.828 78.554 69.236 C77.530 68.622 76.687 67.737 76.122 66.681 C75.629,65.756,75.349,64.699,75.349,63.578 z"/>
</g>
</defs>
<path id="base" d="M0.001,41.774C-0.136,18.067,18.583,0.126,40.756,0.077s66.23,0.502,85.253-0.062
c19.023-0.565,39.046,15.154,39.207,40.625s-20.348,42.81-39.207,42.902c-18.859,0.092-64.289,0.161-85.253-0.148
S0.146,66.785,0.001,41.774z"/>
<path id="_bgCircle" d="" />
<path id="_p1" d="" />
<path id="_p2" d="" />
</svg>
</div>
<div id="buttons">
<input type="radio" name="yesMaybeNo" id="rYes" checked />
<label for="rYes">Yes</label>
<input type="radio" name="yesMaybeNo" id="rMaybe" />
<label for="rMaybe">Maybe</label>
<input type="radio" name="yesMaybeNo" id="rNo" />
<label for="rNo">No</label>
</div>
<script src="js/index.js"></script>
</body>
</html>
index.js中的代码量比较多，我已共享到github上，有需要的可以去阅读阅读。https://github.com/xmt1139057136/svg-3-button/blob/master/svg3button.js
： » svg 实现3选项按钮
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/251354.html