通常我习惯在html中嵌入SVG代码并使用CSS3嵌入动画。
但现在问题是我在一个HTML页面中添加了许多徽标和图标。
在这里，似乎有太多的源代码
这就是我倾向于使用 object 标签来减少源代码的原因，但我不知道如何使用 object 标记为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"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<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"/>
<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
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"/>
<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
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"/>
<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
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"/>
<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
S24.143,17.362,23.941,17.362L23.941,17.362z M23.941,17.362"/>
<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
S17.563,19.557,17.359,19.557L17.359,19.557z M17.359,19.557"/>
<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
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"/>
<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
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"/>
<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"/>
<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
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
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
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
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
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
v14.627C25.766,25.483,25.11,26.137,24.308,26.137L24.308,26.137z M24.308,26.137"/>
<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"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<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
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
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
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
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
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
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
L25.652,21.662z M25.652,21.662"/>
<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
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
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
v-2.673h2.672v2.673H15.81z M15.81,16.572"/>
<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
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
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
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
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
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
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>
答案 0 :(得分：1)
CSS规则不适用于文档边界。因此，如果您希望样式工作，CSS将需要进入SVG。你可以加入它：
在<style>元素中，如HTML
或者您可以使用以下内容包含外部样式表：
<?xml-stylesheet href="style.css" type="text/css"?>
请注意，SVG <style>元素与HTML元素不同。您无法使用SVG引用外部文件。您必须使用XML使用的标准<?xml-stylesheet?>元素。
另请注意，SVG需要通过<object>标记包含在内。外部样式表工作。如果您根据浏览器隐私规则通过<img>嵌入SVG，则无效。