主页 / 问题 / 1017500
Accepted
Андрей
Asked:2020-08-26 23:07:26 +0000 UTC2020-08-26 23:07:26 +0000 UTC

创建一个非圆形的 SVG 预加载器

  • 772

我需要为该站点创建一个 SVG 预加载器，但我不知道如何使用 SVG 本身（正确绘制）。这个想法是这样的：

在此处输入图像描述

加载时，指示器是渐变条，逐渐填充对象，没有尝试解决它，因为 为此，您需要绘制 SVG 本身并path通过（可能）以某种方式设置填充值。

告诉我如何做到这一点？

javascript

3 个回答

  1. Best Answer

    这是一个带有掩码的选项，路径是偶数。通过蛮力选择弧和贝塞尔曲线的点=）

    线条末端摆动的技巧是使用旋转矩形制作的，该矩形覆盖有隐藏渐变背景的相同蒙版。

    requestAnimationFrame(frame);

function frame(t){
  fill.setAttribute('stroke-dasharray', `${t/40} 1000`);
  let p1 = fill.getPointAtLength(t/40);
  let p2 = fill.getPointAtLength(t/40+2);
  let dy = p2.y - p1.y;
  let dx = p2.x - p1.x;
  let a = dy - dx ? Math.atan2(dy, dx)*180/Math.PI+90+Math.sin(t/280)*20 : 90;
  end.setAttribute('transform', `translate(${p1.x},${p1.y})rotate(${a})`);
  requestAnimationFrame(frame);
}
    <svg viewbox=0,0,100,100 height=100vh>
  <defs>
    <linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#D3D0FB" />
        <stop offset="100%" stop-color="#FDE4E2" />
    </linearGradient>
    <mask id="mask">
      <path stroke=white stroke-width=10 fill=none d='
        m20,80
        v-45
        a11,11,0,0,1,20,-5
        c5,5,5,35,10,40
        a11,11,0,0,0,20,-5
        v-45
      '></path>
    </mask>
  </defs>
  <rect width=100 height=100 mask=url(#mask) fill="url(#Grad1)"/>
  <path mask=url(#mask) id=fill stroke=blue stroke-width=11 fill=none d='
      m20,81
      v-46
      a11,11,0,0,1,20,-5
      c5,5,5,35,10,40
      a11,11,0,0,0,20,-5
      v-46
  '></path>
  <g mask=url(#mask)>
    <rect id=end fill=blue x=-10 y=-3 width=20 height=6></rect>
  </g>
</svg>

    • 4

  2. SVG滤镜解决方案

    作为一种可能的解决方案，因为 TC 没有详细说明装载机是如何填充的。

    水平填充：

    .container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
filter: url(#violet-fill);

}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="286" height="274" viewBox="0 0 143 137" preserveAspectRatio="xMinYMin meet">
<defs>
 <linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#D3D0FB" />
        <stop offset="100%" stop-color="#FDE4E2" />
      
      </linearGradient>
	 
<filter  id="violet-fill" x="0%" y="0%">
      <feFlood flood-color="#5050E1" />
      <feOffset dx="-120">
        <animate
          id="anim"
          attributeName="dx"
          values="-120;0"
          dur="5s"
          begin="0s"
          repeatCount="indefinite"
          restart="whenNotActive"
          fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>	
	
</defs>
<path id="path1" fill="url(#Grad1)" d="m17 108c0 0-0.2-31.9 0.4-49 1-29.5 40.3-35.3 47.7-11.3 2.7 8.8 8.1 29.3 12.4 36.5 9.9 16.9 24.1 7.7 24.2-0.4 0.1-13.4 0.1-49.5 0.1-49.5l13.8 0c0 0 0.7 34.5 0.4 49.7-0.2 8.9-5.8 19.6-14.2 22.8-18.6 7.2-32.6 2.1-40.8-22.8-2.9-8.7-3.5-11.5-7-25-3.5-13.4-21-13.4-22.6 0-1.3 11.4-0.2 48.2-0.2 48.2z" />


</svg>
</div>

    垂直填充： 

    .container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
filter: url(#violet-fill);

}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="286" height="274" viewBox="0 0 143 137" preserveAspectRatio="xMinYMin meet">
<defs>
 <linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#D3D0FB" />
        <stop offset="100%" stop-color="#FDE4E2" />
      
      </linearGradient>
	 
<filter  id="violet-fill" x="0%" y="0%">
      <feFlood flood-color="#5050E1" />
      <feOffset dy="-120">
        <animate
          id="anim"
          attributeName="dy"
          values="-120;0"
          dur="5s"
          begin="0s"
          repeatCount="indefinite"
          restart="whenNotActive"
          fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>	
	
</defs>
<path id="path1" fill="url(#Grad1)" d="m17 108c0 0-0.2-31.9 0.4-49 1-29.5 40.3-35.3 47.7-11.3 2.7 8.8 8.1 29.3 12.4 36.5 9.9 16.9 24.1 7.7 24.2-0.4 0.1-13.4 0.1-49.5 0.1-49.5l13.8 0c0 0 0.7 34.5 0.4 49.7-0.2 8.9-5.8 19.6-14.2 22.8-18.6 7.2-32.6 2.1-40.8-22.8-2.9-8.7-3.5-11.5-7-25-3.5-13.4-21-13.4-22.6 0-1.3 11.4-0.2 48.2-0.2 48.2z" />


</svg>
</div>

    • 4

  3. 你能推荐任何程序或类似的东西吗？资源？

    要绘制 svg 图形，您需要矢量编辑器或某种生成器来绘制贝塞尔曲线。本主题提供用于绘制补丁的此类工具的示例和链接。

    根据图中给定的形状创建补丁：

    • 我们将曲线的图片加载到矢量编辑器中并使用工具绘制锚点 -Рисовать кривые Безье 在图中，这些是红色箭头

    在此处输入图像描述

    • 使用控制杆（蓝色箭头）为曲线赋予所需的形状，使其与图形的轮廓重合。
    • 以格式保存文件*.svg
    • 添加渐变

    .container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);
}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="286" height="274" viewBox="0 0 143 137" preserveAspectRatio="xMinYMin meet">
<defs>
 <linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#D3D0FB" />
        <stop offset="100%" stop-color="#FDE4E2" />
 </linearGradient>
</defs>
<path id="path1" fill="url(#Grad1)" d="m17 108c0 0-0.2-31.9 0.4-49 1-29.5 40.3-35.3 47.7-11.3 2.7 8.8 8.1 29.3 12.4 36.5 9.9 16.9 24.1 7.7 24.2-0.4 0.1-13.4 0.1-49.5 0.1-49.5l13.8 0c0 0 0.7 34.5 0.4 49.7-0.2 8.9-5.8 19.6-14.2 22.8-18.6 7.2-32.6 2.1-40.8-22.8-2.9-8.7-3.5-11.5-7-25-3.5-13.4-21-13.4-22.6 0-1.3 11.4-0.2 48.2-0.2 48.2z" />


</svg>
</div>

    动画创作

    stroke-dashoffset您可以通过从最大值更改为零 来使用动画。

    要创建一条路径，一条曲线将沿其动画形状，我们再次使用矢量编辑器：

    在此处输入图像描述

    要使线条在宽度上填满整个图形，请设置 -stroke-width:15.5px; 

    .container {
width:50%;
height:50%;

}

#path2 {
stroke-width:15.5;
stroke:#5050E1;
fill:none;
stroke-dasharray: 240 240;
  stroke-dashoffset: 240;
animation: draw 6s 1s ease infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 240;
  }

  to {
    stroke-dashoffset: 0;
  }
}   
</style>
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="286" height="274" viewBox="0 0 143 137" preserveAspectRatio="xMinYMin meet">


<path id="path2" d="m23.2 107.6c0 0 0.4-31.5 0.2-48.6-0.2-24 32.7-26.2 39.9 0.4 2.4 8.8 3.1 16.6 5.8 24.6 7.8 23 39.2 23.8 39.1-0.4-0.1-17 0.3-47.7 0.3-47.7" />
</svg>
</div>

    把它们放在一起

    带有渐变的 svg 形状及其填充动画：

    .container {
width:50%;
height:50%;

}
#path1 {
fill:url(#Grad1);

}
#path2 {
stroke-width:15.5;
stroke:#5050E1;
fill:none;
stroke-dasharray: 240 240;
  stroke-dashoffset: 240;
animation: draw 6s 1s ease infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 240;
  }

  to {
    stroke-dashoffset: 0;
  }
}
    <div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="286" height="274" viewBox="0 0 143 137" preserveAspectRatio="xMinYMin meet">
<defs>
 <linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="10%" stop-color="#D3D0FB" />
        <stop offset="100%" stop-color="#FDE4E2" />
      
      </linearGradient>
</defs>
<path id="path1" fill="url(#Grad1)" d="m17 108c0 0-0.2-31.9 0.4-49 1-29.5 40.3-35.3 47.7-11.3 2.7 8.8 8.1 29.3 12.4 36.5 9.9 16.9 24.1 7.7 24.2-0.4 0.1-13.4 0.1-49.5 0.1-49.5l13.8 0c0 0 0.7 34.5 0.4 49.7-0.2 8.9-5.8 19.6-14.2 22.8-18.6 7.2-32.6 2.1-40.8-22.8-2.9-8.7-3.5-11.5-7-25-3.5-13.4-21-13.4-22.6 0-1.3 11.4-0.2 48.2-0.2 48.2z" />

<path id="path2" d="m23.2 107.6c0 0 0.4-31.5 0.2-48.6-0.2-24 32.7-26.2 39.9 0.4 2.4 8.8 3.1 16.6 5.8 24.6 7.8 23 39.2 23.8 39.1-0.4-0.1-17 0.3-47.7 0.3-47.7" />
</svg>
</div>

    • 2

相关问题