Анимация загруженного извне SVG с помощью плагина jQuery SVG Кейта Вуда - PullRequest
Новая
       19

Анимация загруженного извне SVG с помощью плагина jQuery SVG Кейта Вуда

2 голосов
/ 20 марта 2011

Я пытаюсь анимировать цвет заливки группы путей, загруженных из внешнего SVG, с помощью плагина Кейта Вуда .

Сначала я импортирую SVG в контейнер div: 

$(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);

или $ ('# group1'). Animate ({svgFill: 'blue'}, 500);

или с любым другим селектором, например с идентификатором пути, ничего не происходит.Но если бы мне нужно было создать путь и анимировать его следующим образом: 

    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?

Ответы [ 3 ]

1 голос
/ 21 июля 2011

Вы абсолютно можете анимировать цвет заливки элементов или групп загруженных SVG. В примере "blue.svg" представляет собой один прямоугольник.

Получено:

  • Вы должны использовать FF4 + или Chrome, а я не пробовал Opera или Safari.
  • Не все анимации поддерживаются в группах, а AFAIK - не все анимации в расширении jquery Кейта Вуда работают в FF. Немного анимация может быть сделана с помощью CSS.
  • Его "rect2816" не "svgblue" или "svgbox", потому что это отдельный прямоугольник элемент, который вы анимируете, а не весь svg.
  • Не забывайте, что CSS-селектор # необходим для адресации элементов и div, в котором они находятся ... "# rect2816" "#svgbox"
  • Его "svgFill" не "заполняется" при использовании расширения jquery svg
  • Использование Inkscape для создания SVG

Загрузить эти библиотеки: 

<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: 

$(document).ready(function(){
  getsvg();  
})
function getsvg(){
  $("#svgbox").svg({  
    loadURL: 'blue.svg',  
    onLoad: main,  
    settings: {}  
  } );
}

Код для анимации прямоугольника, показывающий два способа изменения заливки: 

function main(){

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

Примечание - на моем ящике повторяющаяся анимация при наведении курсора не занимает указанные 2 секунды, поэтому я могу что-то не так делать при наведении курсора.

1 голос
/ 16 июня 2011

Мне удалось достичь ок. то же самое ... ДВА разных способа ... в верхней части кода ниже .. вы увидите простые теги наведения CSS (это работает, по крайней мере, для простых вещей) .... и я ТАКЖЕ смог получить штрихи и заливки, пульсирующие через цвета и т. д., целые 9 ярдов ... но не в Firefox 3.6, тьфу.

Честно говоря, я даже не могу заставить jQuery SVG 1.4.3 правильно поставить чертов SVG в DOM ... Я не знаю, что, черт возьми, с ним не так ... Клянусь, я все сделал правильно .... Так что я не знаю, поможет ли нижеприведенное ... но нужно помнить одну вещь ... вы, возможно, не сможете использовать это как есть ... кажется, что вам нужно либо включить ссылку на пространство имен xmlns: xlink и использовать преобразования xlink ... ИЛИ вы можете взорвать это и просто сделать это с помощью CSS ...

Идея совместимости браузера: SVG - это кластер f ** k, и он делает разработку с элементами вектора настолько сложной, хотя это МОЖЕТ быть таким классным! Жаль, что у всех нет Safari или Chrome, верно? 

<?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: Если у вас есть какие-либо советы, помимо того, что вы опубликовали в своем первоначальном вопросе (который я пробовал), чтобы получить встроенную ИЛИ "связанную" работу SVG с плагином jQ этого французского парня ... любая помощь будет быть оцененным. ..

0 голосов
/ 11 марта 2013

Из того, что я вижу, анимация svgFill анимирует атрибут fill. Небольшой тест показывает, что CSS-свойство fill всегда переопределяет значение SVG-атрибута fill. Я предполагаю, что это предполагаемое поведение.

Я могу изменить цвет заливки группы или отдельных путей следующим образом:

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

Теперь, когда я пытаюсь оживить пути, как это:

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

Вы устанавливаете начальное значение в CSS и пытаетесь анимировать атрибут. Как вы узнали, это не работает. По крайней мере, в моем Firefox.

Одно из решений состоит в том, чтобы не анимировать атрибут, а анимировать свойство заполнения CSS. Для анимации цветов вам понадобится jquery-color: https://github.com/jquery/jquery-color

Чтобы иметь возможность анимировать свойство css fill, вам нужно подключить это: 

jQuery.Color.hook( "fill" );

* - щука

...