php 170712 SVGをcssのみで导入

Posted 2021-05-05

#svg {
	width: 300px;
	margin: auto;
	path {
		stroke:transparent;
		fill:transparent;
	}
}
#svg.start {
	.st0 {
		stroke-dasharray: 2000;
		stroke-dashoffset: 0;
		stroke-width: .5;
	}
	.st0{
		stroke:#0099CC;
		animation: st0_anime 3s ease-in 0s forwards;
	}
}

@keyframes st0_anime {
	0% {
		stroke-dashoffset: 2000;
		fill:transparent
	}
	50% {
		fill:transparent;
	}
	100% {
		stroke-dashoffset: 0;
		fill:#0099CC;
	}
}

<svg  version="1.1" id="svg" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="131.216" height="90.704"
viewBox="0 0 131.216 90.704" overflow="visible" enable-background="new 0 0 131.216 90.704" xml:space="preserve" class="start">
<path class="st0" d="M3.343,18.5c0,0,54.667-24,54.667,0S26.093,50.417,26.093,50.417l-25.5-25.5L3.343,18.5z"
/>
<path class="st0" d="M101.843,9.5c0,0-26.583,69.083,0,42.5s27.167-27.167,27.167-27.167L114.176,10h15.833
l-9.5-9.5H99.676L101.843,9.5z"/>
<path class="st0" d="M11.009,72.333l85.667,8.833h-63c0,0-22.833,20.333-22.833,0S11.009,72.333,11.009,72.333z
"/>
</svg>