vue svg阴阳图水波图

 

 

ball.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="148px" height="148px" viewBox="0 0 148 148 " version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<mask id="ym">
			<rect x="74" y="0" width="74" height="148" fill="white" />
			<circle cx="74" cy="111" r="37" fill="black" />
			<circle cx="74" cy="37" r="37" fill="white" />
		</mask>
		<linearGradient id="b-color" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgba(95,172,227,0.5);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgba(95,172,227,0.2);stop-opacity:1" />
		</linearGradient>
		<linearGradient id="b-color1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgba(95,172,227,1);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgba(95,172,227,0.8);stop-opacity:1" />
		</linearGradient>
		<mask id="ym2">
			<circle cx="74" cy="74" r="74" mask="url(#ym)" style="fill:url(#b-color)" />
		</mask>
	</defs>
	<circle cx="74" cy="74" r="74" mask="url(#ym)" style="fill:url(#b-color)" stroke="rgba(95,172,227,0.2)" stroke-width="1" />
	<path d="M 0,68 C 67.5,68 162.5,156 205,68 A 90,90 0 0,1 0,68 z" style="fill:url(#b-color1)" mask="url(#ym2)">
		<animate attributeName="d" attributeType="XML" dur="8s" repeatCount="indefinite" values="M 0,76 C 56,76 189.8,156 205,76 A 90,90 0 0,1 0,76 z;
               M 0,76 C 56,76 189.8,76 205,76 A 90,90 0 0,1 0,76 z;
               M 0,76 C 56,156 189.8,76 205,76 A 90,90 0 0,1 0,76 z;
               M 0,76 C 56,76 189.8,76 205,76 A 90,90 0 0,1 0,76 z;
               M 0,76 C 56,76 189.8,156 205,76 A 90,90 0 0,1 0,76 z;">
		</animate>
	</path>
</svg>

ball1.svg

 

<?xml version="1.0" encoding="UTF-8"?>
<svg width="148px" height="148px" viewBox="0 0 148 148 " version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<mask id="ym">
			<rect x="0" y="0" width="74" height="148" fill="white" />
			<circle cx="74" cy="111" r="37" fill="white" />
			<circle cx="74" cy="37" r="37" fill="black" />
		</mask>
		<linearGradient id="a-color" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgba(135,107,235,0.5);
stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgba(135,107,235,0.2) ;
stop-opacity:1" />
		</linearGradient>
		<linearGradient id="a-color1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgba(135,107,235,0.9);
stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgba(135,107,235,0.6) ;
stop-opacity:1" />
		</linearGradient>
		<mask id="ym2">
			<circle cx="74" cy="74" r="74" mask="url(#ym)" style="fill:url(#a-color)" />
		</mask>
	</defs>
	<g id="circle">
		<circle cx="74" cy="74" r="74" mask="url(#ym)" style="fill:url(#a-color)" stroke="rgba(95,172,227,0.2)" stroke-width="1" />
		<path d="M 0,90 C 67.5,74 162.5,156 205,90 A 90,90 0 0,1 0,90 z" style="fill:url(#a-color1)" mask="url(#ym2)">
			<animate attributeName="d" attributeType="XML" dur="8s" repeatCount="indefinite" values="M 0,90 C 67.5,74 162.5,156 205,90 A 90,90 0 0,1 0,90 z;
               M 0,90 C 67.5,90 162.5,90 205,90 A 90,90 0 0,1 0,90 z;
               M 0,90 C 67.5,156 162.5,74 205,90 A 90,90 0 0,1 0,90 z;
               M 0,90 C 67.5,90 162.5,90 205,90 A 90,90 0 0,1 0,90 z;
               M 0,90 C 67.5,74 162.5,156 205,90 A 90,90 0 0,1 0,90 z;">
			</animate>
		</path>
	</g>
</svg>

demo.vue

<template>
  <div class="test">
    <img src="../assets/ball.svg" alt="" class="img1" />
    <img src="../assets/ball1.svg" alt="" class="img2" />
  </div>
</template>

<style lang="scss" scoped>
.test {
  position: relative;
  .img1 {
    position: absolute;
  }
  .img2 {
    position: absolute;
  }
}
</style>