我的<circle>在哪裏？

我期待在circle svg元素上創建簡單的脈動動畫。我使用的是動畫transform: scale(..,..)，但由於某種原因，它將整個圓圈移動到其容器中，而不是簡單地縮放元素本身。我的<circle>在哪裏？

這裏的動畫：

animation: pulsate 2s infinite linear; 

@keyframes pulsate { 
    0% {transform: scale(0.1, 0.1); opacity: 0.0;} 
    50% {opacity: 1.0;} 
    100% {transform: scale(1.2, 1.2); opacity: 0.0;} 
}

而這裏的一個例子（包括應用到div產生所期望的結果相同的動畫）：

http://codepen.io/anon/pen/jWqVyb

關於如何創建任何想法這種影響？該圓圈可能位於svg內的任何位置，因此需要保持此位置。

來源

2015-12-17 aw04

您需要更改transform-origin property值。

在這種情況下，你可以使用值50% 50%：

Updated Example

.beacon { 
    height: 100px; 
    width: 100px; 
    border-radius: 50%; 
    background: #fff; 
    box-shadow: 0px 0px 2px 2px #fff; 
    animation: pulsate 2s infinite linear; 
    transform-origin: 50% 50%; 
}

默認情況下，該值是0 0上svg元素。參考：

CSS Transforms Module - 8 The transform-origin Property

對於沒有相關的CSS佈局框SVG元素的默認值是0 0。

來源

2015-12-17 20:50:49

偉大的信息，我不知道轉換的起源是特別爲svg – aw04

@ aw04是的，我不完全確定*爲什麼*。每個其他元素的默認值是'50％50％0'。 –

SVG規範（它是在CSS之前定義的）沒有變換原點的概念，縮放定義爲縮放整個座標系統，這是一個非常簡單的矩陣。將CSS和SVG融合在一起對標準人來說是一項艱鉅的任務。 –

您需要添加適當的變換起源於你的圈子：

circle { 
    fill: #fff; 
    transform-origin: 50px 50px; 
}

變換起源於HTML有默認值50% 50%;但不是在SVG。

來源

2015-12-17 20:57:24

我的<circle>在哪裏？

回答

相關問題