主页 / 问题 / 1095620
Accepted
Sevastopol'
Asked:2020-03-17 06:44:48 +0000 UTC2020-03-17 06:44:48 +0000 UTC

如何制作这样的人物组合？

  • 772

如何制作这样的人物组合？
边框的位置应如图所示。
形状应该是透明的，只有它们的边界是可见的。

在此处输入图像描述

css

2 个回答

  1. Best Answer

    静态选项

    stroke-dashoffset用于移动虚线以填充角落。

    虚线的总长度是 -1052px
    除以 35 段，一段是30.05px
    因此stroke-dasharray:26, 4.05;，其中 26 是虚线的长度，4.05空格。

    #circ,#rec {
fill:transparent;
stroke:#979797;
stroke-width:8;
}

#rec {
stroke-dasharray:26,4.05;
stroke-dashoffset:-3;
}
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle id="circ" cx="60" cy="75" r="55"/>
    
   <path id="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" />
 
</svg>

    单击圆圈时带有虚线动画的变体： 

    #circ,#rec {
fill:transparent;
stroke:#979797;
stroke-width:8;
}

#rec {
stroke-dasharray:26,4.05;
stroke-dashoffset:-3;
}
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle id="circ" cx="60" cy="75" r="55" >
    <animate attributeName="fill" begin="circ.click" dur="0.5s" to="yellowgreen" fill="freeze" />
  </circle>	
  <path id="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" >
    <animate attributeName="stroke-dashoffset" begin="circ.click" dur="4s" values="100;-3" repeatCount="indefinite" />
 </path>
</svg>

    CSS动画选项 

    .circ,.rec {
fill:transparent;
stroke:#979797;
stroke-width:8;

}
.rec { 
stroke-dasharray:20,4;
stroke-dashoffset:3;
}

.circ:hover {
fill:skyblue;
}

.circ:hover + .rec {
animation: anim 1s linear infinite;

}
@keyframes anim { 
0%{stroke-dashoffset:3;}
100%{stroke-dashoffset:100;}
}
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 240" width="500" version="1.1">
  <circle class="circ" cx="60" cy="75" r="55" >
    
  </circle>	
  <path class="rec" d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" >
    
 </path>
</svg>

    更新

    路径长度计算：

    <div> 
 <input  type="button" value="Total"  onclick="TotalLength()"/>
 </div>  
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="500" height="500" viewBox="0 0 500 500" > 
 
         <path id="check" fill= "none" stroke ="grey" stroke-width ="1" 
         
		 d="M140 60H460V200H60v-50c46.7 0 81-30.4 72.7-90.1z" />
</svg> 
   <script>
         function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };
  </script>

    • 9

  2. 其实不难

    <svg viewBox="0 0 500 240" width="500">
  <circle cx="60" cy="75" r="50" fill="transparent" stroke="#000" stroke-width="10"/>
  <path d="m140,60 320,0 0,140 -400,0 0,-50 q70,0 80,-95z" 
        fill="transparent" stroke="#000" stroke-width="10" stroke-dasharray="31 16"/>
</svg>

    • 4

相关问题