svg "background-image"에 애니메이션을 적용 할 수 있습니까?

내 창에 세로축으로 응답하고 수직으로 이미지를 중심에 놓고 싶습니다. 그래서 div 배경에 이미지를 통합하기로 결정했습니다. 이제 스트로크 - 대시 오프셋 및 스트로크 - 대시 오프셋을 사용하여 스트로크 - 대시 어레이 및 애니메이션을 내 SVG에 추가하려고하면 작동하지 않습니다.svg "background-image"에 애니메이션을 적용 할 수 있습니까?

SVG 배경 이미지에 애니메이션을 적용 할 수 있습니까?

svg 이미지는 여러 줄로 구성됩니다. 여기 내 SVG 파일 (만 다른 x와 y 값을 훨씬 더 라인이 있습니다) : 여기

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200" xml:space="preserve"> 
 
<g id="Layer_1"> 
 

 
<line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/> 
 

 
</g> 
 
</svg>

그리고 내 HTML과 CSS 파일 :

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 

 
.Container { 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(Space.svg); 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 

 
.path { 
 
    stroke-dasharray: 20; 
 
}

<body> 
 
    <div class="Container"> 
 
    </div> 
 
    </body>

가

출처

2017-01-29 5rsly

이보고 https://github.com/jrummyapps/AnimatedSvgView –

/검색 Q = 가치가있다 svg + animate + transform 또는/search? p = svg + animate + transform 검색하셨습니까? :) –

CSS를 컨테이너 HTML 파일이나 별도의 CSS 파일이 아닌 SVG 이미지 파일 자체에 넣어야합니다. –

당신은 애니메이션 할 수 있습니다 ...하지만 CSS를 사용하여 그것을 지원하는 브라우저 - 당신은 IE와 Edge가됩니다.

.svg { 
 
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='300' height='70' viewBox='0 0 300 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E %23a%7Banimation:x .5s ease alternate 14%7D%40keyframes x%7Bfrom%7Bfill:%23c2c2c2%7Dto%7Bfill:%23fff%7D%7D%3C/style%3E%3Crect id='a' x='14' y='23' width='28' height='28' fill='%23c2c2c2' /%3E%3Crect x='52' y='33' width='100' height='11' fill='%23c2c2c2' /%3E%3C/svg%3E"); 
 
    background-repeat: no-repeat; 
 
    min-height: 200px; 
 
}

<div class="svg">Look at my background</div>

참고 위에서 사용 된 실제 인코딩 SVG는 다음과 같습니다?

<svg width="300" height="70" viewBox="0 0 300 70" xmlns="http://www.w3.org/2000/svg"> 
    <style type="text/css"> 
     #a { animation: x .5s ease alternate 14; } 

     @keyframes x { 
      from { fill: #000; } 
      to { fill: #fff; } 
     } 
    </style> 
    <rect id="a" x="14" y="23" width="28" height="28" fill="#000" /> 
    <rect x="52" y="33" width="100" height="11" fill="#000" /> 
</svg>

출처

2017-01-30 12:16:03 Ruskin

Ok cool. 고마워. 그래서 내 잘못은 내가 CSS 파일에 애니메이션하려고했는데, 당신은 이미지 코드에 "스타일"을 썼다. 나는 네가 그렇게 할 수 있다는 것을 실제로 몰랐다. 그러나 외부에서 애니메이션을 제어하는 방법이 있습니까? 예를 들어 버튼을 클릭하면 애니메이션이 시작/중지되어야합니다. – 5rsly

배경 이미지가 없다 ... 대안은 이미지의 애니메이션이 아닌 버전의 bg가있는 클래스를 스왑하는 것입니다. CSS는 gzip을 매우 잘 처리합니다. – Ruskin

SVG-SMIL 애니메이션을 시도해 볼 수는 있지만 IE 나 Edge에서는 작동하지 않습니다. – Ruskin

background-image은 CSS를 통해 애니메이트 할 수있는 것이 아닙니다. 브라우저가 16 진수 색상 코드 및 숫자 값과 마찬가지로 키 프레임 사이의 값을 계산하는 방법은 없습니다.

1) background-position 및 background-size가 요소의 배경 이미지로 배치 이미지를 이동하는 키 프레임을 통해 제어 할 수 있습니다

내가 알고 있어요 두 솔루션, 그러나있다.

2) 이미지는 절대 위치 지정을 사용하는 요소의 콘텐츠 일 수 있습니다. 그리고 만에 당신은 주위를 이동할 수 있습니다, 심지어 축소/정의 된 속성에 따라 확장 (예 : top, bottom, left, right, width 및 height.)

출처

2017-01-30 00:22:34

svg "background-image"에 애니메이션을 적용 할 수 있습니까?

답변

관련 문제