Html 使用css设置svg动画，而不使用内联svg_Html_Css_Object_Svg_Svg Animate

Html 使用css设置svg动画，而不使用内联svg

html css object svg

Html 使用css设置svg动画，而不使用内联svg,html,css,object,svg,svg-animate,Html,Css,Object,Svg,Svg Animate,我对html、css等都是一个新手（一周前开始），我想在我的网站上创建一个动画svg图形。到目前为止，我成功地使用内嵌svg创建了一个良好的结果：但是我不喜欢这个解决方案如果我想继续网站，html文件中的代码太长了。所以我尝试了，或者链接到一个外部svg或php（包含svg）文件。这些解决方案显示了图形，但没有动画。那么如何将矢量图形的信息放在外部文件中，将其链接到html（或css）并使用css制作动画？我想它可以与这些方法中的一种一起工作，但是——因为我是一个新手——它对我来说不

我对html、css等都是一个新手（一周前开始），我想在我的网站上创建一个动画svg图形。到目前为止，我成功地使用内嵌svg创建了一个良好的结果：

但是我不喜欢这个解决方案
如果我想继续网站，html文件中的代码太长了。所以我尝试了，或者链接到一个外部svg或php（包含svg）文件。这些解决方案显示了图形，但没有动画。
那么如何将矢量图形的信息放在外部文件中，将其链接到html（或css）并使用css制作动画？
我想它可以与这些方法中的一种一起工作，但是——因为我是一个新手——它对我来说不起作用。
我希望有人能帮我解决这个问题，解决方案也不会太复杂。。。

提前谢谢

附言：是的，我喜欢图形的复杂性。使其更简单（从而缩短代码）不是一个选项；）

是否可以使用Javascript异步加载SVG？@Jaxo:可能。我对javascript一无所知……我试着像这样将svg链接到html：

或：

这样他们甚至没有按照css中的定义使用

填充

。PHP包含用于包含PHP代码，而不是任意文件，这就是它不起作用的原因。尝试使用

：）@Jaxo所以我只需在html文件的

中粘贴类似

的内容（例如，当我有一个菜单栏时），或者我必须在另一个地方定义其他内容。e、 g.在

或外部文件中？

<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>

#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;
}