svg 배경 애니메이션

프런트엔드 개발에서는 SVG를 배경 애니메이션으로 사용할 수 있는 변환 애니메이션이 자주 필요합니다.
텍스트 링크
animate
svg에서 애니메이션 효과를 실현하는 데 animate 요소를 사용할 수 있습니다

attributeName

변경된 요소 속성 이름 정의하기

attributeType

attributeType = "XML"인 경우 attributeName은 XML의 속성으로 간주됩니다.attributeType="CSS"를 사용할 때attributeName은 css의 속성으로 간주됩니다.attributeType을 지정하지 않을 때 기본값은 "auto"이며,attributeName을 css의 속성으로 하고, 무효일 경우,attributeName을 XML의 속성으로 합니다.

from、to、by

from과 to는 각각 변화하는 속성의 초기값과 종료값을 정의합니다.from은 초기 값이 animate 부모 요소에 해당하는 속성 값임을 나타낼 수 있습니다.to를 by로 대체할 수 있습니다. 변경 편이량을 나타냅니다.to = from + by로 이해할 수 있습니다.

begin、dur、end

begin에서 애니메이션 시작 시간을 정의합니다.dur 애니메이션에 필요한 시간 정의하기;end 애니메이션 종료 시간을 정의합니다.시간 단위 h:시간;min:분s:초ms: ms.기본 시간 단위: s

fill

fill="freeze"시 애니메이션이 종료될 때 변화하는 요소 속성 값은 애니메이션이 종료될 때의 상태에 머물렀다.fill="remove"시 애니메이션이 종료되면 변경된 요소 속성 값이 애니메이션이 시작되었을 때의 상태로 돌아갑니다.fill 속성 기본값은:remove입니다.

상기 코드는 녹색 정사각형이 점점 길어지는 애니메이션을 실현할 것이다.
animateTransform
transform 속성 변화를 실현하는 애니메이션은 animateTransform을 사용하여 animate 요소를 대체합니다.animateTransform의attributeName은transform으로 지정되고 type 속성으로translate,scale,rotate,skewX,skewY 등 변경할 속성을 지정합니다.
animateTransform에는 additive 속성이 있습니다.기본적으로 additive 속성 값은 replace입니다. 현재 animateTransform의 초기 상태는 이전의 animateTransform 변화 결과와 무관합니다. 만약additive="sum"은 현재 animateTransform의 변화가 이전의 animateTransform 변화에 기반을 두고 있음을 나타냅니다.

animateMotion
animateMotion은 css 애니메이션 속성만으로는 불가능한 효과를 구현합니다.animateMotion은 다음과 같은 모 요소를 지정된 경로를 따라 이동시킬 수 있습니다.

animateMotion에는 기본적으로 0인 rotate 속성이 있으며 요소는 운동할 때 회전하지 않습니다.auto로 설정하면 요소에 해당하는 수평 축이 path 경로와 항상 수평으로 유지됩니다.
loading 효과
background-image 속성을 이용하여svg 애니메이션을loading 상태로 표시하고 url을 주의한 후 데이터 설명을 추가해야 합니다. 데이터:image/svg+xml,
공용 css

.loading {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

html

css

.loading-audio {
    background-image: url('data:image/svg+xml,')
}

.loading-ball-triangle {
    background-image: url('data:image/svg+xml,');
}

.loading-bars {
    background-image: url('data:image/svg+xml,');
}

.loading-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-grid {
    background-image: url('data:image/svg+xml,');
}

.loading-oval {
    background-image: url('data:image/svg+xml,');
}

.loading-puff {
    background-image: url('data:image/svg+xml,');
}

.loading-spinning-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-tail-spin {
    background-image: url('data:image/svg+xml,');
}

.loading-three-dots{
    background-image: url('data:image/svg+xml,');
} 

효과