Keith Wood 's의 jQuery SVG 플러그인으로 외부로드 SVG 애니메이션하기

Question

키스 우드의 plugin을 사용하여 외부 SVG에서로드 된 경로 그룹의 채우기 색상에 애니메이션을 적용하려고합니다.

먼저 내가 사업부 용기에 SVG를 가져옵니다

$(document).ready(function() { 
$('#header-main').svg({loadURL: 'header.svg'}); 
var svg = $('#header-main').svg('get'); 

});

은 SVG 파일은 다음과 같다 :

<svg> 
    <g id="group1"> 
    <path d="M0,22.943V0.223h1.413v22.721H0z"/> 
    <path etc../> 
    </g> 
</svg> 

난과 같이 그룹 또는 개별 경로의 채우기 색상을 변경할 수 있습니다

svg.style('#group1 {fill: black}'); 

을 지금은이 같은 경로를 애니메이션 할 때 . :

$('path').animate({svgFill: 'blue'}, 500); 

또는 $은 ('#의 그룹 1')는 애니메이션 ({svgFill '블루'} 500);

또는 다른 선택기 (예 : 경로 ID)로는 아무 것도 발생하지 않습니다. 하지만 경로를 만들고, 이런 식으로 애니메이션을한다면 :

var path1 = svg.createPath(); 
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30). 
    line(150, 30).curveC(200, 30, 200, 90, 150, 90).close(), 
    {fill: 'none', stroke: '#D90000', strokeWidth: 10}); 
$('path').animate({svgFill: 'blue'}, 500); 

내가 애니메이션을 생성 경로를하지만, header.svg 파일에서 가져온 다른 경로는 아무것도하지 않습니다.

내가 여기 뭔가 잘못하고 있습니까? 아니면 외부 svg에 애니메이션을 적용 할 수없는 플러그인입니까?

Answer 1

나는 대략 달성 할 수 있었다. 똑같은 ... 두 가지 다른 방법 ... 아래 코드의 맨 위에. 간단한 CSS 호버 태그 (간단한 것들에 대해서는 작동 함)를 볼 수 있습니다 ... 그리고 나는 또한 얻을 수있었습니다. 스트로크와 채우기 색상 등을 통해 전체 9 야드 ...하지만 파이어 폭스 3.6 아니, 우.

솔직히 말해서 jQuery SVG 1.4.3에 DOM에 괴물이 들어간 SVG를 넣을 수 없다. 나는 도대체 잘못한 것을 모르겠다. 나는 모든 것을 올바르게했다고 맹세한다 ... 그래서 나는 아래의 도움이된다면 ..하지만 한가지 명심해야 할 .. 당신은 이것을 사용할 수 없을 수도 있습니다 ... 그것은 xmlns : xlink 네임 스페이스 링크를 포함시켜야하고 xlink를 사용해야하는 것처럼 보입니다. 변형을 ... 아니면 그 물건을 날려 버릴 수 있고 그냥 CSS를 통해 할 수 ...

SVG는 클러스터 f ** k이며, 벡터와 함께 개발하고있다. 매우 열심히일지도 몰라도 요소가 너무 열심히 !! 모두 사파리 나 크롬이 없어도 좋지 않습니까?

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<style>  
    g #front {fill:white; fill-opacity:.9; stroke-dasharray:none; stroke-dashoffset:0} 
    g:hover #front {fill: red; fill-opacity:.5; stroke-dasharray:30,20;} 
    g #back {fill:white;fill-opacity:.8; stroke-dashoffset:0;} 
    g:hover #back {stroke-dasharray:30,20; stroke-dashoffset:20; fill: grey; } 
</style> 
<g id="folderIcon" transform="translate(-15.1,-40.1)"> 
<g id="sides" transform="translate(-173,-364)"> 
<path d="m 198,406 0,9 -8,0 0,92 122,0 0,-92 -86,0 0,-9 -28,0 z" id="back" style="stroke:black;stroke-width:3.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;" /> 
<rect height="84.7" id="front" style="stroke:black; stroke-width:3.608; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-opacity:1;" transform="matrix(1,0,-0.397,0.918,0,0)" width="122" x="410" y="468" /> 
</g> 
</g> 
<animate xlink:href="#front" 
    attributeName="fill" 
    attributeType="CSS" 
    from="#ff0" to="#00f" dur="10s" fill="freeze" /> 
<animate xlink:href="#back" 
    attributeName="stroke" 
    attributeType="CSS" 
    from="#88ff88" 
     to="#880088" 
    dur="10s" 
    fill="freeze" /> 
</svg> 

PS : 당신은 "연결"인라인 또는를 얻을 수 있습니다 (I 해봤하는) 원래의 질문에 게시 한 것을 이외의 어떤 조언이있는 경우 SVG의 그 프랑스 사람의 JQ 플러그인 .. any help would be appreciated. 작업.

Answer 2

로드 된 SVG 요소 또는 그룹의 채우기 색상을 절대적으로 애니메이션으로 만들 수 있습니다. 예제에서 "blue.svg"는 하나의 사각형입니다.

둘점은 :

• 당신은 FF4 + 또는 크롬을 사용해야합니다 내가 오페라 나 사파리 시도하지 않았습니다.
• 모든 애니메이션이 그룹으로 지원되는 것은 아니며, Keith Wood의 jquery 확장에있는 애니메이션이 모두 FF로 작동하는 것은 아닙니다. 일부 애니메이션을 CSS로 수행 할 수 있습니다.
• "rect2816"은 "svgblue"또는 "svgbox"가 아니기 때문에 개별 사각형 인 요소가 전체 svg가 아닌 애니메이션으로 표시됩니다.
• CSS selector가 요소와 div에 주소를 지정할 때 필요하다는 것을 잊지 마십시오. "# rect2816" "#svgbox"
• jquery svg를 사용할 때 "svgFill"이 "채워지지"않습니다. 확장
• 를 사용하여 잉크 스케이프는 SVGs

로드 이러한 라이브러리를 만들려면 다음

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.svg.js"></script> 
<script type="text/javascript" src="js/jquery.svganim.js" ></script> 

로드 SVG :

을

코드 채우기를 변경하는 두 가지 방법을 보여 사각형에 애니메이션 :

function main(){ 

$('#svgblue').mouseover(function(){ 
    $('#rect2816').animate({ svgFill: red },2000); 
}); 
    $('#svgblue').mouseout(function(){ 
$('#rect2816').css("fill", blue); 
    }); 
} 

참고 - 내 상자에 반복 마우스 오버 애니메이션은 지정된 2 초 고려하지 않습니다, 그래서 내가 뭔가 잘못하고있을 수도있다 마우스 오버.

Answer 3

내가보기에 svgFill 애니메이션은 '채우기'속성을 애니메이션화합니다. 약간의 테스트는 CSS의 'fill'속성이 항상 SVG 'fill'속성의 값을 무시한다는 것을 보여줍니다. 나는 이것이 의도 된 행동이라고 생각합니다.

I 좋아해서 그룹 또는 개별 경로의 채움 색상을 변경할 수

svg.style ('# 그룹 1의 {을 채우 검은}');

지금 나는이 같은 경로를 애니메이션하려고하면 ('경로')

$ ({svgFill를 '블루'}, 500) 애니메이션;.

CSS에서 초기 값을 설정하고 속성을 애니메이션화하려고합니다. 당신이 알았 으면, 그것은 작동하지 않습니다. 적어도 제 파이어 폭스에는 없습니다.

하나의 해결책은 속성을 애니메이션화하지 않고 CSS 채우기 속성에 애니메이션을 적용하는 것입니다. 당신이 JQuery와 컬러해야합니다 색상을 애니메이션하기 위해 : https://github.com/jquery/jquery-color

는 CSS 재산을 채우기 애니메이션을 할 수 있으려면을, 당신은 후크해야한다는 점에서 :

jQuery.Color.hook("fill"); 

* -pike