SVGアニメーションを表示する
PowerPointでSVGデータを作成する
sample1.svg
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path d="M362 232 616 232 616 430 362 430ZM563.25 331 414.75 256.75 414.75 405.25Z" fill="yellow" fill-rule="evenodd"/>
<path d="M563.25 331 414.75 256.75 414.75 405.25Z" fill="blue" fill-rule="evenodd"/>
<path d="M563.25 331 414.75 405.25 414.75 256.75Z" stroke="" stroke-width="2" stroke-miterlimit="8" fill-rule="evenodd"/>
<rect x="362" y="232" width="254" height="198" stroke="#042433" stroke-width="2" stroke-miterlimit="8" fill="none"/>
</svg>
sample2.svg
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<text font-family="07NikumaruFont,07NikumaruFont_MSFontService,sans-serif" font-weight="400" font-size="57" fill="" transform="translate(312.904 147)"> 日向坂46</text>
</svg>
HTMLとCSSを記述する
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
.logo svg{
width: 400px;
height: 100%;
stroke: blue;
fill: transparent;
animation-name:dash-animation;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes dash-animation{
0%{
stroke-dasharray:0 50;
stroke: blue;
fill: white;
}
50%{
stroke-dasharray:50 0;
stroke: blue;
fill: beige;
}
100%{
stroke-dasharray:50 0;
fill: skyblue;
stroke: blue;
}
}
</style>
</head>
<body>
<p class="logo">
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path d="M362 232 616 232 616 430 362 430ZM563.25 331 414.75 256.75 414.75 405.25Z" fill="yellow" fill-rule="evenodd"/>
<path d="M563.25 331 414.75 256.75 414.75 405.25Z" fill="blue" fill-rule="evenodd"/>
<path d="M563.25 331 414.75 405.25 414.75 256.75Z" stroke="" stroke-width="2" stroke-miterlimit="8" fill-rule="evenodd"/>
<rect x="362" y="232" width="254" height="198" stroke="#042433" stroke-width="2" stroke-miterlimit="8" fill="none"/>
</svg>
<br>
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<text font-family="07NikumaruFont,07NikumaruFont_MSFontService,sans-serif" font-weight="400" font-size="57" fill="" transform="translate(312.904 147)"> 日向坂46</text>
</svg>
</p>
</body>
</html>