【发布时间】：2020-06-16 05:23:12
【问题描述】：
我正在尝试学习如何使用 CSS 为 SVG 制作动画。
我是新手，我正在网上搜索资料。
我的最终目标是生成 .svg 格式的自动 svg，因为我上传此动画最终产品的程序仅接受 .svg 文件。
我最近在一个 .html 文件中看到了下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: cornsilk;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
@keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
@keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
</style>
</head>
<!--#D75A4A;-->
<body>
<div class="container">
<svg viewBox="0 0 50 50">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>
</body>
</html>
由于我不能将 .html 用于我的目的，我尝试查看是否可以使用外来对象将 div 附加到 svg 中，以便我仍然可以使用 css 样式。我看到这篇文章 (HTML inside SVG) 并将代码更改为以下内容。我已经意识到，通过 CSS 使用 div 制作动画要容易一些，因为它是在初始代码中完成的。
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
background-color: blueviolet;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
@keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
@keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
</style>
<foreignobject class="box" x="0" y="0" width="1280" height="720">
<div class="container">
<svg viewBox="-10 -10 100 100">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>
</foreignobject>
</svg>但它根本不会以 .svg 格式呈现。但是，如果我将相同的代码放在 <html> </html> 标签内，它就可以工作。我不确定我做错了什么，或者我是否试图实现这是不可能的。
如果你可以请告诉我一些见解会对我有很大帮助。
提前谢谢你。
顺便说一句，我从示例链接中获取了以下部分，以查看它是否呈现为 .svg 文件并且确实如此。
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
TRY.
</div>
</foreignObject>
</svg>【问题讨论】：
-
您可以在 svg 元素中使用 css 样式，方法是将 css 规则放在
<style>元素中，如下所示：` ` -
@enxaneta 我尝试了您的建议，将代码更改为
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720"><style type="text/css"><![CDATA[ * {margin: 0; padding: 0......100% { fill: DarkTurquoise; } } ]]></style>并将其保存为 .svg 文件。但它不会呈现。你能指出我做错了什么吗？