Привет народ!

Я читал отличную статью«Использование SVG» от Криса Койера (http://css-tricks.com/using-svg/) и решил использовать некоторые вещи для создания анимированного логотипа. Но я немного подрался. Я объясню.

Я использую.svg файл для логотипа. Я тяну файл в HTML-файл, используя<object> тег. Внутри SVG-файла я используюCSS3 анимации сделать некоторые трюки с объектами внутри SVG.

Использование файла SVG с анимацией CSS3 и<object> тег работает хорошо. Но проблема начинается, когда я пытаюсь положить это в<a> тег. Я использую уловку, указанную на комментарии Йохана Эрнандеса к статье (я не знаю происхождение уловки), ина примере этой скрипки: http://jsfiddle.net/WEbGd/.

Проблема в том, что ссылка работает, а не анимация css3 внутри SVG. Я знаю, это потому, чтоz-index трюк ... но я еще не нашел лучшего подхода к этому.

Может быть, у кого-нибудь есть предложение сделать эту работу или хотя бы для другого подхода? Я сделал ручку, чтобы понять, что я делаю:http://codepen.io/seraphzz/pen/CJrBp.

Вот код SVG, который я сделал для тестирования:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="176.5px" height="63.9px" viewBox="0 0 176.5 63.9" enable-background="new 0 0 176.5 63.9" xml:space="preserve" id="logo-svg">
<style>
    .style3{
        fill:   #9F4400;
    }
    .style4{
        fill:   #9331D3;
    }

    #logo-svg, #one{
        -webkit-transform-origin: center center;
           -moz-transform-origin: center center;
             -o-transform-origin: center center;
            -ms-transform-origin: center center;
                transform-origin: center center;
        -webkit-transition: all .2s ease-in-out;
           -moz-transition: all .2s ease-in-out;
             -o-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
    }

    #logo-svg{
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
             -o-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
    }

    #logo-svg:hover{
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
             -o-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);    
    }

    #one{
        -webkit-animation: one .3s ease-in-out;
        -webkit-animation-play-state: paused
        -moz-animation: one .3s ease-in-out;
        -moz-animation-play-state: paused;
        -o-animation: one .3s ease-in-out;
        -o-animation-play-state: paused;
    }

    /*.active class added for test purposes*/
    #logo-svg:hover #one, #one.active{
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
    }

    @-webkit-keyframes one{
        0%,50%,100%{-webkit-transform: rotate(0deg);}
        25%,75%{-webkit-transform: rotate(10deg);}
    }
    @-moz-keyframes one{
        0%,50%,100%{-moz-transform: rotate(0deg);}
        25%,75%{-moz-transform: rotate(10deg);}
    }
    @-o-keyframes one{
        0%,50%,100%{-o-transform: rotate(0deg);}
        25%,75%{-o-transform: rotate(10deg);}
    }

</style>
<rect id="one" width="63.9" height="63.9" class="style3"/>
<ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
</svg>

Любая помощь будет приветствоваться!

Спасибо!

Редактировать:

После некоторого исследования я не нашел возможного и чистого решения для этого только css3 и html5. Итак, я делаю снимок с небольшим количеством JavaScript. Я сделал разветвление предыдущего пера с помощью некоторого JavaScript, вот что я получаю до сих пор:http://codepen.io/seraphzz/pen/lxKAw

Я пытаюсь получить доступ к внутреннему DOM SVG с помощью Javascript. У меня проблема с доступом к контенту с.contentDocument в Chrome ведьма может быть вызвана политикой происхождения файла (отладка Chrome возвращает эту ошибку:Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://favolla.com.br". Protocols, domains, and ports must match..

Моя идея заключается в том, чтобы получить доступ к элементу внутри файла SVG с некоторым идентификатором, а затем, с помощью javascript, изменить класс элемента с помощью.addClass, например. Добавленный класс находится внутри файла .svg (отредактировано выше).

Что вы, ребята, думаете об этом подходе?