가져온 SVG 객체 애니메이션하기

raphael.js 대신 svg.js를 사용하기로 결정했습니다. SVG 이미지에 대한 간단한 애니메이션 기능 만 필요하기 때문에 멋진 구문으로 크기가 훨씬 작습니다.가져온 SVG 객체 애니메이션하기

SVG 가져 오기 작업을 성공적으로 수행했지만 애니메이션을 적용하기 위해 어떤 객체를 참조해야하는지 파악할 수 없습니다.

가져 오기 후 내 코드의 마지막 비트 내가 구글 크롬의 요소를 검사하고, 내가 볼 수있는 모두가 SVG 개체, "g", #의 path1layer1 및 Path2993했다

var rawSvg = 'svg raw data here' 
var draw = svg('paper').size('100%', '100%'); 
    draw.import(rawSvg);

말한다. 그래서 그들 각각의 애니메이션 메서드를 적용하려고했지만 개체에 애니메이션 메서드가 없다고 말하는 오류가 발생합니다. 그래서 어떤 객체에 애니메이트 메서드를 바인딩해야합니까?

는

이 내가이 문서를 읽고 있어요 그것은 나에게 분명하지 않다

path2993.animate().move(150, 150);

출처

2013-02-05 Khuram Malik

svg.import.js 플러그인이 업데이트되었습니다. import 된 모든 요소는 import() 메소드에 의해 반환 된 객체에서 참조됩니다. mentioned here :

var rawSvg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><line id="line1234" fill="none" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="138.682" y1="250" x2="293.248" y2="95.433"/><rect id="rect1235" x="22.48" y="19.078" fill="#F7931E" stroke="#C1272D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="94.972" height="94.972"/><path id="path1236" opacity="0.5" fill="#29ABE2" d="M189.519,131.983c0,5.523-4.477,10-10,10H92.257c-5.523,0-10-4.477-10-10V53.659 c0-5.523,4.477-10,10-10h87.262c5.523,0,10,4.477,10,10V131.983z"/><circle id="circle1237" opacity="0.8" fill="#8CC63F" cx="201.603" cy="159.508" r="69.067"/><polygon id="polygon1238" fill="none" stroke="#8C6239" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="286.331,287.025 227.883,271.365 212.221,212.915 255.009,170.127 313.459,185.789 329.119,244.237 "/></svg>'; 
var draw = svg('paper'); 
var store = draw.import(rawSvg); 
store.polygon1238.fill('#f06');

출처

2013-02-05 21:46:41 wout

으로 요소를 가져올 수 있습니다. 라이브러리를 업데이트 했으므로 코드가 다음과 같이 바뀌 었습니다. var draw = svg ('paper'). , '100 %'); \t \t var store = draw.import (rawSvg); 그래도 작동합니까? 나는 여전히 "객체가 이제 애니메이션을가집니다." store.animate().이동 (150, 150); –

"store"는 가져온 요소가 들어있는 객체이기 때문입니다. 다음과 같이 타겟팅 할 수 있어야합니다. store.polygon1238.animate (200) .fill ('# f06'); – wout

을 시도 마지막 일이다. 하지만 this.SVG 개체에 id 특성을 추가 한 다음 표준 DOM 메서드를 통해 svg 요소에 액세스 할 수 있습니까? 아니면 js 객체 자체를 검색하려고합니까? 그게 당신이 그릴 수있는 변수가 아니겠습니까, 아니면 너무 늦었 을까요?

출처

2013-02-05 19:06:44 Anthony

저는 솔직히 모릅니다. SVG 객체에 액세스 할 수있어서 기쁩니다. DOM에서 SVG를 조작하고 싶기 때문에 JS 객체에 액세스 할 필요가 없습니다. 정확히 내가 ID 속성을 추가할까요? –

DOM 속성을 계속 확인하면 ID가 path2993으로 표시되므로 이상이 발생하지 않는 이유가 이상합니다. Raphael.js를 사용하여 동일한 작업을 수행하고 경로 이름을 제공 했으므로 제대로 작동했습니다. –

SVG.get ('element_id') – wout

svg.js 가져 오기 플러그인은 매우 미성년자입니다. 가져온 모든 요소는 실제로 svg.js으로 내장되어 있습니다 그래서 그들은 모든() 메소드 어린이를 사용 svg.js 내에서 노출 :

var draw = svg('paper'); 
draw.import('... svg data ... '); 
draw.children().forEach(function(element) { 
    console.log(element.attr('id'); 
});

하지만이 요소를 참조 할 경우 개별적으로 거대한 문서를 가져 오기보다는 개별적으로 작성하는 것이 좋습니다 SVG의 Inkscape에서 생성 된 경로를 사용하고 단일 모양을 만들어 일반 svg로 저장한다고 가정 해 보겠습니다. 다음과 같이 보일 수있는, SVG 파일을 열고 <path> 태그를 찾아 d="..." 속성의 내용을 복사 : 다음

M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z

당신이 경로를 생성하고 애니메이션을 적용 할 수 있습니다 :

var pathData = 'M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z'; 
var draw = svg('paper'); 
var path = draw.path(pathData).size(30).move(10,10); 
path.animate().move(100,100);

출처

2013-02-05 21:16:33 wout

가져온 SVG 객체 애니메이션하기

답변

관련 문제