9

こんにちは皆さん！

私はChris Coyer ( http://css-tricks.com/using-svg/ ) の素晴らしい記事「Using SVG」を読んでいて、いくつかのものを使用してアニメーションのロゴを作成することにしました。しかし、私は少し喧嘩をしていません。説明します。

ロゴには.svgファイルを使用しています。<object>タグを使用してhtmlファイルにファイルをプルしています。SVG ファイル内では、css3 アニメーションを使用して、svg 内のオブジェクトを操作しています。

css3アニメーションと<object>タグでsvgファイルを使用するとうまくいきます。<a>しかし、これをタグの中に入れようとすると問題が発生します。Johan Hernández の記事へのコメント (トリックの起源はわかりません) で指摘されたトリックを使用しており、このフィドルで例示されています: http://jsfiddle.net/WEbGd/。

問題は、リンクは機能しますが、SVG 内の css3 アニメーションは機能しません。私はそれが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 で作成しました。これまでに取得したものは次のとおりです。

私がやろうとしているのは、Javascript を使用して SVG の内部 DOM にアクセスすることです。Chrome でのコンテンツへのアクセスに問題.contentDocumentがあります。原因はファイル オリジン ポリシーが原因である可能性があります (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 ファイル内の要素に何らかの ID でアクセスし、次に javascript を使用して、要素のクラス.addClassをたとえば で変更することです。追加されたクラスは .svg ファイル内にあります (上で編集)。

皆さんは、このアプローチについてどう思いますか?

4

1 に答える 1