Question

我是一个新手（一周前开始）到html，css等等，我想在我的网站上创建一个动画svg图形。到目前为止，我设法用内联svg创建一个好结果： http://codepen.io/einserpasch/pen/xbWwOR

<body bgcolor="#999">

 <div id="menue"></div>
 <div id="titel">
<svg id="einserpasch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.2 134.2">
<style type="text/css">       
</style>
<path 
/* here comes the crazy long code of the svg - see codepen */
/>
</svg>     </div>
</body>

和随之而来的CSS：

#einserpasch {
height:133px;
fill:#000;
animation-name: glow-grey;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}

@keyframes glow-grey {
0% { fill: black; }
100% { fill:#999; }
}

#einserpasch:hover {
fill:#009;
/* another idea i've had, but not so important */ 
}

#titel {
background:#999;
height:133px;
width:555px;
position:fixed;
top:0px;
left:0px;
}
#menue {
position:fixed;
top:0px;
left:0px;
background:#000;
padding:0px;
width:150px  ;
height:100%;
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}

但我不喜欢这个解决方案。
如果我想继续使用该网站，html文件中的代码是很长的。所以我试过＆lt; image＆gt;，＆lt; object＆gt;或者＆lt;？php包括？＆gt;链接到外部svg或php（包含svg）文件。这些解决方案显示图形，但没有动画 那么如何将矢量图形的信息放在外部文件中，将其链接到html（或css）并使用css为其设置动画？
我想它可以使用这些方法中的一种，但是 - 因为我是新手 - 它不适合我我希望有人可以帮助我，解决方案并不太复杂......

提前谢谢！

ps：是的，我喜欢图形的复杂性。使其更简单（从而缩短代码）不是一种选择;）

使用css动画svg而不使用内联svg

0 个答案: