问题
I am trying to learn how to animate SVG using CSS.
I am new to this and I am scrubbing the internet to pick up material.
My end goal is to generate an automated svg in .svg format as the program where I upload this animated end product only accepts .svg file.
I have recently come across the code below in an .html file
<!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>
Since I can't use .html for my purpose, I tried to see if I can use a foreignobject to append the div inside svg so that I can still use the css styling. I came across this article (HTML inside SVG) and altered the code to the following. I have realized that it is little easier to animate using a div through CSS as it was done in the initial code.
<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>But it does not render at all in .svg format. But if I put the same code inside <html> </html> tag it works. I am not sure what I am doing wrong or whether I am trying to achieve which is not possible.
If you can please shed me some insight would help me a lot.
Thank you in advance.
By the way, from the example link I took the following portion to see if it renders as a .svg file and it does.
<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>回答1:
As I've commented you have to use css styles inside the svg element by puting the css roules inside a block like so:
<style type="text/css">
<![CDATA[
/*styles*/
]]>
</style>
Next comes your example with the css code inside the svg element
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
* {
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>
<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>来源：https://stackoverflow.com/questions/60513840/use-of-foreignobject-inside-svg