CSS和SVG的三种方法

斑点（这些光滑，有机的形状）对Web Design具有俏皮的触感，非常适合插图和背景效果。虽然插图软件是一种选择，但让我们探索使用CSS和SVG创建斑点的乐趣。

这是三种方法：

1。SVG圆圈和椭圆

最简单的方法涉及在SVG中重叠的圆圈和椭圆。 SVG的<circle></circle>元素很简单：

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cx和cy ：定义圆圈的中心坐标。
• r ：指定半径。
• fill ：设置填充颜色。

多个重叠圆圈创建一个基本斑点：

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  
</svg>

对于更多品种，请使用<ellipse></ellipse>独立控制水平和垂直半径：

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

虽然简单，但这种方法可能缺乏真正斑点的有机感觉。

另外，对于基本圈子，CS可以就足够：

 。圆圈 {
  边界拉迪乌斯：50％；
  身高：50px;
  宽度：50px;
}

2。复杂形状的SVG路径

对于复杂的斑点设计，SVG的<path></path>元素提供最终控制。它允许使用以下命令进行绘图线和曲线。

• M ：移至某个点。
• L ：画一条线。
• C ：绘制立方体贝齐曲线。
• Z ：关闭路径。

这些命令的详细说明可以在Chris Coyier的综合指南中找到。手动创建复杂的路径可能很乏味，因此请考虑使用工具生成路径数据。例如：

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

该路径始于（10，10），曲线至（50，10），并关闭形状。

3。CSS和SVG过滤器用于粘层效果

该技术利用SVG过滤器从相交形状产生“粘伊”效果。我们将使用两个重叠的矩形具有透明度，然后将SVG过滤器应用于模糊和颜色操作。

使用SVG过滤器定义<filter></filter>并通过CSS应用：

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

feGaussianBlur掩盖了形状，而feColorMatrix调整了颜色。然后在CSS中引用过滤器：

 .blob-container {
  过滤器：URL（“＃goo”）;
  / * ...其他样式... */
}

这种方法提供了独特，易于自定义的粘斑斑点效应。实验不同的滤波器值以实现所需的外观。

请记住调整值和参数​​以微调每种方法中斑点的形状和外观。

以上是CSS和SVG的三种方法的详细内容。更多信息请关注PHP中文网其他相关文章！