Sevastopol' Asked:2020-03-17 06:44:48 +0800 CST2020-03-17 06:44:48 +0800 CST 2020-03-17 06:44:48 +0800 CST 如何制作这样的人物组合? 772 如何制作这样的人物组合? 边框的位置应如图所示。 形状应该是透明的,只有它们的边界是可见的。 css 2 个回答 Voted Best Answer Alexandr_TT 2020-03-17T14:38:03+08:002020-03-17T14:38:03+08:00 静态选项 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> Monkey Mutant 2020-03-17T07:07:43+08:002020-03-17T07:07:43+08:00 其实不难 <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>
静态选项
stroke-dashoffset
用于移动虚线以填充角落。虚线的总长度是 -
1052px
除以 35 段,一段是
30.05px
因此
stroke-dasharray:26, 4.05;
,其中 26 是虚线的长度,4.05
空格。单击圆圈时带有虚线动画的变体:
CSS动画选项
更新
路径长度计算:
其实不难