Можно ли сделать такое в svg?

<style> 
 #r1 { 
background: linear-gradient(45deg, #F7F3F7, #C5DDE8); 
} 
</style>  
<div id="r1"> 
 <svg width="100%" height="100%" viewBox="0 0 400 400" > 
 <rect  x="10" y="10" width="200" height="350" stroke-width="3" stroke-dashoffset="5" stroke-dasharray="10 10" fill="none" stroke="#7D7798" /> 
</svg>  
</div>

<style> 
 #r1 { 
background: linear-gradient(45deg, #F7F3F7, #C5DDE8); 
} 
</style>  
<div id="r1"> 
 <svg width="100%" height="100%" viewBox="0 0 400 400" > 
 <rect  x="10" y="10" width="200" height="350" stroke-width="3" stroke-dashoffset="5" stroke-dasharray="10 10" fill="none" stroke="#7D7798" > 
 <animate attributeName="stroke-dashoffset" values="550;0;550" dur="8s" fill="freeze" /> 
 </rect> 
</svg>   
</div>

 .container{ 
 width:300; 
 height:350; 
  
background: linear-gradient(90deg, #F7F3F7, #C5DDE8); 
} 
 
 
#r1:hover  {  
fill:#C4DCF0; 
stroke:#7D7798;  
stroke-dasharray: 1150; 
stroke-dashoffset: 1150; 
-webkit-animation: draw1 3s  ease-in-out forwards;  
animation: draw1 3s ease-in-out forwards; 
 
 
 
} 
#r1 { 
fill:#DCE7F0; 
stroke:#C0C2DB; 
} 
@keyframes draw1 { 
  0% { stroke-dasharray:20 10; stroke-dashoffset:1150;} 
  100% { stroke-dasharray:20 10; stroke-dashoffset:550;} 
   
} 

<div class="container" > 
 <svg   width="100%" height="100%" viewBox="0 0 400 400" > 
  <g id="r1"> 
 <rect  x="10" y="10" width="200" height="350" stroke-width="3"  /> 
 <text font-size="36" font-family="sans-serif" x="35" y="120" stroke="#7D7798" font-weight="500">Over me</text> 
 </g> 
</svg>   
</div>