Анимировать SVG с CSS без использования встроенного SVG

Question

Анимировать SVG с CSS без использования встроенного SVG

Я новичок (начал неделю назад) в 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-файле слишком длинный, если я хочу перейти на сайт. поэтому я попытался ,

Анимировать SVG с CSS без использования встроенного SVG

0 ответов