Question

我想将一个圆形成一条线（路径）这可能吗？

也许这就是Google可能成为问题的方式。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>

最好的方式（对我而言）是顶部和底部是否合在一起但我对如何做到这一点更感兴趣！我找不到任何关于如何塑造svg元素的内容

--------- SMALL UPDATE ----------
刚刚找到this。这可能有助于我找到方向。

--------- SMALL UPDATE ----------
所以我试着在没有JQuery的情况下做到这一点，但我认为它不会起作用。这个问题的原因是因为我的JQuery糟透了.... 有人可以帮我解决一些JQuery问题吗？

Answer 1

您可以使用animateTransform方法进行垂直缩放，将圆转换为直线，使用平移-Y将转换原点保持在圆心

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28">
  <title>circle</title>
  <g>
  <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10">
    <animateTransform attributeName="transform"
    type="scale"
    from="1 1"
    to="1 0"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </circle>
 <animateTransform attributeName="transform"
    type="translate"
    from="0 0"
    to="0 24"
    begin="0s"
    dur="2s"
    repeatCount="indefinite"
  />
  </g>
</svg>

Answer 2

有时在生活中，你不应该过度思考一切答案很简单，但我只是想到了。

一个简单的scale()就可以了。

.container{
  width: 100px;
  height: 100px;
  margin: 0 auto;
}	
	
@keyframes shapeshifter {
	0% {
		transform: scale(1,1);
		transform-origin: 50% 50%;
	} 	
	100% {
		transform: scale(1,0.01);
		transform-origin: 50% 50%;
	}	
}
.shape{ 
	animation: shapeshifter 1s ease-in-out 1 both;
}

<div class="container">
	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <title>circle</title>
  <circle class="shape" cx="50.109" cy="50.086" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
</div>

SVG从一个到另一个的动画

2 个答案: