如何通過對象標籤爲SVG動畫

Question

通常情況下，我曾經用html嵌入SVG代碼，用CSS3動畫。
但現在的問題是我有很多的標誌和圖標添加到一個單一的HTML頁面。 在這裏，它看起來太多的源代碼。
這就是爲什麼我傾向於使用對象標記來減少源代碼，但我不知道如何動畫SVG與對象標記。

下面的代碼只是兩個圖標，它已經很多了。

svg:hover path { 
 
    stroke-dasharray: 200; 
 
    stroke-dashoffset: 200; 
 
    animation: dash 3s linear alternate infinite; 
 
    cursor:pointer; 
 
} 
 

 
@keyframes dash { 
 
    from { 
 
    stroke-dashoffset: 200; 
 
    } 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<!-- Icon 1 -->  
 
<svg version="1.1" class="myFeed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> 
 
<g> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M16.264,10.783h-5.119v5.118h5.119V10.783z M15.531,15.168h-3.656v-3.656h3.656V15.168z M15.531,15.168"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M23.941,10.783h-5.851c-0.201,0-0.366,0.163-0.366,0.366c0,0.202,0.165,0.364,0.366,0.364h5.851 
 
\t \t c0.201,0,0.366-0.162,0.366-0.364C24.308,10.945,24.143,10.783,23.941,10.783L23.941,10.783z M23.941,10.783"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M23.941,12.977h-5.851c-0.201,0-0.366,0.162-0.366,0.364c0,0.203,0.165,0.366,0.366,0.366h5.851 
 
\t \t c0.201,0,0.366-0.163,0.366-0.366C24.308,13.139,24.143,12.977,23.941,12.977L23.941,12.977z M23.941,12.977"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M23.941,15.168h-5.851c-0.201,0-0.366,0.165-0.366,0.366c0,0.202,0.165,0.367,0.366,0.367h5.851 
 
\t \t c0.201,0,0.366-0.165,0.366-0.367C24.308,15.333,24.143,15.168,23.941,15.168L23.941,15.168z M23.941,15.168"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M23.941,17.362H11.875c-0.201,0-0.363,0.165-0.363,0.366s0.162,0.366,0.363,0.366h12.066c0.201,0,0.366-0.165,0.366-0.366 
 
\t \t S24.143,17.362,23.941,17.362L23.941,17.362z M23.941,17.362"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M17.359,19.557h-5.484c-0.201,0-0.363,0.165-0.363,0.366s0.162,0.365,0.363,0.365h5.484c0.204,0,0.365-0.164,0.365-0.365 
 
\t \t S17.563,19.557,17.359,19.557L17.359,19.557z M17.359,19.557"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M17.359,21.751h-5.484c-0.201,0-0.363,0.162-0.363,0.366c0,0.201,0.162,0.363,0.363,0.363h5.484 
 
\t \t c0.204,0,0.365-0.162,0.365-0.363C17.725,21.913,17.563,21.751,17.359,21.751L17.359,21.751z M17.359,21.751"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M17.359,23.945h-5.484c-0.201,0-0.363,0.161-0.363,0.363c0,0.204,0.162,0.365,0.363,0.365h5.484 
 
\t \t c0.204,0,0.365-0.161,0.365-0.365C17.725,24.106,17.563,23.945,17.359,23.945L17.359,23.945z M17.359,23.945"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M19.188,24.674h5.12v-5.117h-5.12V24.674z M19.919,20.288h3.656v3.657h-3.656V20.288z M19.919,20.288"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M26.499,9.685c0-0.005-0.002-0.011-0.004-0.017V4.933H8.952v10.968H5.295v8.773c0,1.212,0.984,2.195,2.194,2.195h16.818 
 
\t \t c1.206,0,2.188-0.983,2.188-2.191V9.703C26.497,9.698,26.499,9.692,26.499,9.685L26.499,9.685z M25.766,5.665v3.656H9.684V5.665 
 
\t \t H25.766z M6.027,24.674v-8.041h2.924v8.041c0,0.808-0.656,1.463-1.462,1.463C6.682,26.137,6.027,25.481,6.027,24.674L6.027,24.674z 
 
\t \t M24.308,26.137H9.123c0.005-0.005,0.01-0.014,0.016-0.02c0.073-0.086,0.143-0.177,0.204-0.273 
 
\t \t c0.009-0.015,0.019-0.031,0.027-0.047c0.061-0.098,0.112-0.201,0.155-0.311c0.005-0.015,0.01-0.03,0.016-0.044 
 
\t \t c0.043-0.112,0.077-0.227,0.1-0.347c0.002-0.011,0.004-0.023,0.006-0.034c0.023-0.125,0.038-0.255,0.038-0.388V10.051h16.082 
 
\t \t v14.627C25.766,25.483,25.11,26.137,24.308,26.137L24.308,26.137z M24.308,26.137"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M22.113,6.395h-8.774v2.193h8.774V6.395z M21.382,7.856h-7.312V7.127h7.312V7.856z M21.382,7.856"/> 
 
</g> 
 
</svg> 
 

 
    
 
<!-- Icon 2 --> 
 
<svg version="1.1" class="myEvent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> 
 
<g> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M26.479,20.812c-0.153-1.561-1.318-2.691-2.776-2.691c-0.914,0-1.682,0.555-2.17,1.227 
 
\t \t c-0.486-0.672-1.255-1.227-2.169-1.227c-1.458,0-2.623,1.131-2.774,2.691c-0.016,0.102-0.055,0.467,0.087,1.035 
 
\t \t c0.206,0.838,0.686,1.598,1.385,2.201l3.18,2.719c0.086,0.072,0.188,0.111,0.292,0.111s0.21-0.039,0.295-0.111l3.181-2.721 
 
\t \t c0.696-0.6,1.175-1.361,1.383-2.199C26.534,21.279,26.494,20.914,26.479,20.812L26.479,20.812z M25.652,21.662 
 
\t \t c-0.17,0.686-0.563,1.311-1.143,1.807l-2.975,2.545l-2.977-2.545c-0.576-0.496-0.971-1.121-1.143-1.807 
 
\t \t c-0.113-0.463-0.072-0.723-0.072-0.723l0.006-0.043c0.094-1,0.815-2.012,2.017-2.012c0.835,0,1.517,0.691,1.82,1.377l0.349,0.785 
 
\t \t l0.349-0.785c0.304-0.686,0.983-1.377,1.82-1.377c1.201,0,1.923,1.012,2.021,2.049C25.727,20.936,25.769,21.195,25.652,21.662 
 
\t \t L25.652,21.662z M25.652,21.662"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M19.245,17.336h3.436v-4.199H8.176v11.068h7.633v-6.869H19.245z M19.245,13.899h2.671v2.673h-2.671V13.899z M12.374,13.899 
 
\t \t h2.672v2.673h-2.672V13.899z M8.939,13.899h2.673v2.673H8.939V13.899z M8.939,17.336h2.673v2.672H8.939V17.336z M11.612,23.441 
 
\t \t H8.939v-2.67h2.673V23.441z M15.046,23.441h-2.672v-2.67h2.672V23.441z M15.046,20.008h-2.672v-2.672h2.672V20.008z M15.81,16.572 
 
\t \t v-2.673h2.672v2.673H15.81z M15.81,16.572"/> 
 
\t <path fill="#044B94" fill-opacity="0" stroke="#ff00ff" d="M15.428,26.113h-9.16V11.229h18.32v4.962c0,0.21,0.171,0.381,0.383,0.381c0.21,0,0.381-0.171,0.381-0.381V7.03 
 
\t \t c0-0.21-0.171-0.382-0.381-0.382h-1.909V5.504c0-0.21-0.172-0.382-0.381-0.382h-2.674c-0.211,0-0.381,0.172-0.381,0.382v1.144 
 
\t \t h-8.396V5.504c0-0.21-0.171-0.382-0.382-0.382H8.176c-0.212,0-0.381,0.172-0.381,0.382v1.144H5.886 
 
\t \t c-0.21,0-0.382,0.171-0.382,0.382v19.466c0,0.211,0.171,0.383,0.382,0.383h9.542c0.21,0,0.381-0.172,0.381-0.383 
 
\t \t S15.639,26.113,15.428,26.113L15.428,26.113z M20.391,5.886h1.907v2.289h-1.907V5.886z M8.557,5.886h1.909v2.289H8.557V5.886z 
 
\t \t M6.268,7.412h1.527v1.145c0,0.211,0.169,0.382,0.381,0.382h2.671c0.211,0,0.382-0.171,0.382-0.382V7.412h8.396v1.145 
 
\t \t c0,0.211,0.17,0.382,0.381,0.382h2.674c0.209,0,0.381-0.171,0.381-0.382V7.412h1.526v3.053H6.268V7.412z M6.268,7.412"/> 
 
</g> 
 
</svg>