旋轉svg元素看起來像彈起輕微

我看着與我的查詢相關的現有問題，但無法獲得幫助。旋轉svg元素看起來像彈起輕微

我使用css3的基本動畫。下面是小提琴..

https://jsfiddle.net/gamerVinod/d21c6bcb/5/

下面是CSS

@keyframes rotate { 
    from { 
     transform: rotate(0deg); 
     transform-origin: center; 
    } 
    to { 
     transform: rotate(359deg); 
     transform-origin: center; 
    } 
} 

.rotate-element { 
    animation: rotate 1s infinite linear; 
}

每當我使用SVG和旋轉它，然後稍微反彈。

我無法確定它是由於SVG路徑還是其他任何東西。可以有人請讓我知道它的原因以及如何解決它？

來源

2016-12-12 Trans

你並沒有旋轉在圓的中心。 – Ouroborus

我試過使用「transform-origin：center;」，沒有幫助，更新了小提琴 – Trans

如果你的圓圈沒有居中在方框中，那麼'transform-origin：center;'不起作用。我懷疑你的圈子也不是圓形的。你正在使用貝塞爾曲線而不是弧。 – Ouroborus

正如@Ouroborus所說，貝塞爾曲線只能近似圓弧。如果你需要旋轉那些形狀，那麼除非你的形狀被精心準確地製作，否則你可能會看到一些擺動。

您可以改爲使用圓弧（A）路徑元素。但你不需要。到目前爲止，最簡單的解決方案是使用實際的<circle>。

@keyframes rotate { 
 
    from { 
 
     transform: rotate(0deg); 
 
    } 
 
    to { 
 
     transform: rotate(359deg); 
 
    } 
 
} 
 

 
.rotate-element { 
 
    animation: rotate 1s infinite linear; 
 
} 
 

 
.parent{ 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    display: flex; 
 
    align-items:center; 
 
    text-align: center; 
 
} 
 

 
.child{ 
 
    height: 200px; 
 
    width: 200px; 
 
}

<div class="parent"> 
 
<svg class="child rotate-element" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> 
 
    <circle cx="20" cy="20" r="13.25" opacity="0.2" fill="none" 
 
      stroke="#000" stroke-width="3"/> 
 
    <circle cx="20" cy="20" r="13.25" fill="none" 
 
      stroke="#000" stroke-width="3" 
 
      stroke-dasharray="6 80"/> 
 
    </svg> 
 
</div>

在這裏，我使用兩個圓用粗筆劃（線）和透明填充。後面的那個是半透明的（就像原來的SVG）。頂部的只有部分筆畫通過使用短劃線數組來繪製。

來源

2016-12-12 07:37:46

旋轉svg元素看起來像彈起輕微

回答

相關問題