Я пытаюсь научиться анимировать SVG с помощью CSS.
Я новичок в этом, и я вычищаю inte rnet, чтобы подобрать материал.
Моя конечная цель - создать автоматический 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 внутри SVG ) и изменил код следующим образом. Я понял, что анимировать с помощью div через CSS немного проще, чем это было в исходном коде.
<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>, это сработает. Я не уверен, что я делаю неправильно или пытаюсь добиться чего-то невозможного.
Если вы можете, пожалуйста, пролить мне немного понимания, мне очень поможет.
Спасибо вам в advance.
Между прочим, из примера ссылки я взял следующую часть, чтобы посмотреть, будет ли он отображаться как файл .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>