SVG 夜晚的灯塔案例（use、mask、clipPath ...）

最新推荐文章于 2024-07-19 10:13:39 发布
最新推荐文章于 2024-07-19 10:13:39 发布
阅读量351 收藏 1
点赞数
分类专栏： SVG 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz00008888/article/details/121120891
版权

  • 案例效果

    temp.gif

  • 案例代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0;
      padding: 0;
      /* 全屏 */
      width: 100%;
      height: 100%;
      /* 清空字号，免得影响 svg */
      line-height: 0;
      font-size: 0;
      /* 天空颜色 */
      background-color: #001122;
    }
  </style>
</head>
<body>
  <!-- svg -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -300 800 600">
    <!-- 模板 -->
    <defs>
      <!-- 星星 -->
      <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"/>
    </defs>
    <!-- 真实：天空 + 灯塔 -->
    <g id="real">
      <!-- 星星组 -->
      <g id="star-group"></g>
      <!-- 灯塔 -->
      <g id="light-tower">
        <!-- 模板 -->
        <defs>
          <!-- 灯塔颜色渐变 -->
          <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stop-color="#999"/>
            <stop offset="1" stop-color="#333"/>
          </linearGradient>
          <!-- 灯光颜色渐变 -->
          <radialGradient id="light" cx="0.5" cx="0.5" r="0.5">
            <stop offset="0" stop-color="rgba(255, 255, 255, 0.8)"/>
            <stop offset="1" stop-color="rgba(255, 255, 255, 0)"/>
          </radialGradient>
          <!-- 灯光裁剪范围 -->
          <clipPath id="light-clip">
            <!-- 灯光 -->
            <polygon points="0 0 -400 -15 -400 15" fill="rgba(255, 0, 0, 0.5)"/>
            <!-- 灯点 -->
            <circle cx="0" cy="0" r="2"/>
            <!-- 灯光旋转动画 -->
            <animateTransform attributeName="transform"
              attributeType="XML"
              type="rotate"
              from="0"
              to="360"
              dur="10s"
              repeatCount="indefinite"/>
          </clipPath>
        </defs>
        <!-- 灯塔 -->
        <polygon points="0 0 5 50 -5 50" fill="url(#tower)"/>
        <!-- 灯塔光 -->
        <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"/>
      </g>
      <!-- 月亮 -->
      <g id="moon-group">
        <!-- 月亮蒙板，颜色越亮可见，越黑不可见 -->
        <mask id="moon-mask">
          <circle cx="-300" cy="-150" r="100" fill="white"/>
          <circle cx="-260" cy="-180" r="100" fill="black"/>
        </mask>
        <!-- 月亮形状 -->
        <circle cx="-300" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"/>
      </g>
    </g>
    <!-- 反射：天空 + 灯塔 -->
    <g id="reflact" mask="url(#fading)">
      <!-- 模板 -->
      <defs>
        <!-- 海面渐变 -->
        <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="rgba(255, 255, 255, 0.5)"/>
          <stop offset="0.5" stop-color="rgba(255, 255, 255, 0)"/>
        </linearGradient>
        <!-- 海面蒙板，颜色越亮可见，越黑不可见 -->
        <mask id="fading">
          <!-- 海面 -->
          <rect x="-800" y="0" width="1600" height="600" fill="url(#fade)"/>
        </mask>
      </defs>
      <!-- 将 真实 进行反转 -->
      <use xlink:href="#real" transform="scale(1, -1)  translate(0, -100)"/>
    </g>
    <!-- 分割线 -->
    <line x1="-800" y1="50" x2="800" y2="50" stroke="#fff"/>
  </svg>
  <script>
    // 命名空间
    var SVG_NS = 'http://www.w3.org/2000/svg'
    var XLINK_NS = 'http://www.w3.org/1999/xlink'
    // 画布
    var paper = document.querySelector('svg')
    // 渲染星星
    function renderSatr () {
      // 获取星星模板
      var starRef = document.getElementById('star')
      // 获取星星画板
      var starGroup = document.getElementById('star-group')
      // 星星数量
      var starCount = 1000
      // 当前星星
      var star
      while (starCount--) {
        // 通过 use 标签使用星星模板
        star = use(starRef)
        // 星星透明度
        star.setAttribute('opacity', random(0.1, 0.4))
        // 星星摆放位置
        star.setAttribute('transform', `translate(${random(-800, 800)}, ${random(-300, 50)}) scale(${random(0.1, 0.6)})`)
        // 添加到星星画板
        starGroup.append(star)
      }
    }
    // 开始渲染星星
    renderSatr()
    // 创建 use 标签
    function use(origin) {
      var _use = document.createElementNS(SVG_NS, 'use')
      _use.setAttributeNS(XLINK_NS, 'xlink:href', `#${origin.id}`)
      return _use
    }
    // 随机函数
    function random(min, max) {
      return min + (max - min) * Math.random()
    }
  </script>
</body>
</html>
卡尔特斯
关注
专栏目录
svg里的clipPath和mask
orq18810575870的博客
04-14 1826
svg里的clipPath定义了一个区域,在区域内的元素是可见的,区域外是不可见的,同时,区域外的元素无法产生事件.咱们先看一个简单区域的例子:&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" &gt; &lt;clipPath id="rectClip"&gt; &lt;rect
snap.svg.js_如何使用Snap.svg操纵和动画SVG
Web design 教程小屋
07-07 1614
在本教程中，我们将介绍Snap.svg，这是一个JavaScript库，可帮助动画化和操纵SVG内容。 为了演示一些可用的功能，我们将对SVG眼睛进行动画处理。 什么是Snap.svg？ Snap.svg是一个JavaScript库，可轻松为现代浏览器创建和操作SVG图形。 它是德米特里·巴拉诺夫斯基 （ Dmitry Baranovskiy ）的拉斐尔（Raphaël ）的继任者； 用于...
HTML5 SVG夜晚天空星星流星特效
06-24
HTML5 SVG夜晚天空星星流星特效是一款canvas画布基于svg绘制高山上夜空中的星星背景动画场景特效。
SVG灯塔
u010928583的博客
10-23 181
SVG灯塔 使用svg图形引用、裁切、蒙版制作的小页面。（仅仅作为慕课网学习svg的记录,非原创代码）。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt;
svg绘制蓝色星空，月亮，旋转灯塔
weixin_30369041的博客
02-23 203
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style&g...
一篇文章带你了解SVG 蒙版(Mask)
pdcfighting的博客
11-14 1463
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见，以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。 一、简单的蒙版 代码解析： 本示例使用ID=mask1定义一个蒙版。 元素内部是一个元素。元素定义了蒙版的形状。 定义了一个使用mask的元素，元素使用CSS style属性mask内部引用mask ID属性。 例： <svg width="500" height="120"> <defs> &lt
CSS3 SVG 构建的白炽灯悬停控制动效
陈小峰（iefreer）的专栏
09-13 2723
鼠标悬停上去，灯泡被点亮，还出现阴影效果。
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
nuxt-svg-sprite-loader 用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader ...< use xss=removed></ use></ svg > < script > import Logo from ' @/
SVG图片剪辑路径鼠标悬停效果.zip
06-08
剪辑路径通常通过`<clipPath>`元素定义，然后应用到其他SVG元素上，限制其显示范围。这为创建复杂的形状和视觉效果提供了可能。 2. **CSS与SVG的结合**：虽然SVG是内联XML，但也可以通过CSS来控制样式，包括颜色、...
13.SVG过滤器用来给SVG图形添加特效
liuhao9999的博客
03-28 555
SVG 过滤器元素 SVG过滤器（也称为滤镜）用来给SVG图形添加特效，和PS软件中的滤镜效果类似。SVG中可用的过滤器元素包括： <feBlend> - 图片混合 <feColorMatrix> - 颜色变换 <feComponentTransfer> <feComposite> - 图片合成 <feConvolveMatrix> - 卷积变换 <feDiffuseLighting> - 散射光 <feDispl
SVG霓虹灯效果
weixin_30588675的博客
09-06 244
地铁上逛segmentfault看到一篇用纯css和SVG来实现的很赞的效果，觉得拿来做一些开场效果动画应该不错。 原文地址：https://segmentfault.com/a/1190000010963326 觉得很有趣，正好925快到了，就撸了一个生日快乐的 效果图如下： 就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻 fill:none;可以让图形不被填充，...
SVG之图形的引用user、剪切clip和蒙版mask
li123128的博客
07-30 677
目录   一、使用标签实现图形的引用   二、使用标签实现图形的剪切   三、使用标签实现图形的蒙版   四、综合运用 一、使用&lt;use&gt;标签实现图形的引用 　　当我们在使用SVG绘制图形时，有时候会出现大量重复图形，这个时候我们就可以使用&lt;use&gt;标签进行图形引用，相当于图形的克隆。&lt;use&gt;标签在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同...
突破编程_前端_SVG（使用 svg-pan-zoom 库进行平移与缩放）
weixin_41978174的博客
07-19 36
svg-pan-zoom 是一个、高性能且易于使用的 JavaScript 库，专为增强 SVG 图像的浏览体验而设计。它提供了平移和缩放功能，使用户能够无缝探索大型或复杂的 SVG 图形。这个库允许用户对SVG图像进行交互操作，包括缩放、平移和旋转等，从而提供了更加灵活和交互式的 SVG 浏览体验。在 svg-pan-zoom 中，可以通过配置选项来定制SVG的平移和缩放行为。
实现SVG图片放大缩小(zoom)与拖动(pan)的方法
热门推荐
Bin
03-10 2万+
最经在做一个与SVG图片相关的功能，涉及到对该类图片的放大缩小及拖动操作，就像地图一样的效果。原理不细说了，请看文章《How to Zoom and Pan with SVG》。在此讲一下具体怎么实现. 首先，要在svg文件添加，如果svg文件头部没有包含命名空间"xmlns:xlink="http://www.w3.org/1999/xlink"，则需要加上该命名空间 然后，在svg文件中添
svg+描边动画实现霓虹灯特效
string佳佳的博客
11-04 879
原博地址：https://juejin.cn/post/6844903815708164110 效果图： 代码实现 html： <svg width="1600px" height="100%" xmlns="http://www.w3.org/2000/svg"><!--xmlns命名空间,和html分离--> <symbol id="text"> <text x="0" y="35%" class="t
SVG_29_径向渐变radialGradient
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-24 1269
知识点： radialGradient 用来定义径向渐变，以对图形元素进行填充或描边。 说人话，就是定义辐射性渐变，就是以一个点为圆心，向周围进行颜色渐变。前面有文章讲解了线性渐变，有兴趣的可以点击查看：lineGradient线性渐变-- SVG_9_线性颜色渐变_竖排文字_动画 使用radialGradient的方式与使用lineGradient的方式一样，都是在defs标签中定义的，然后通过url(#id)的方式进行引用。不仅可以用在fill填充，还可以应用在stroke描边上。这里其实和另一个
SVG蒙版(mask)的基础使用教程
weixin_33709219的博客
03-31 546
蒙版工作原理 设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原理。上图中我创建了两个图层——蓝色的背景和红色的前景，并且在红色前景上应用了一个蒙版（右边红圈）。正常情况下红色前景应该完全遮盖住蓝色背景，但是请注意红圈中的蒙版，我在这...
SVG 教程 （四）多边形，曲线，路径
Just Code
07-15 1042
SVG &lt;polygon&gt;   SVG 多边形 - &lt;polygon&gt;   实例 1 &lt;polygon&gt; 标签用来创建含有不少于三个边的图形。 多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。 polygon来自希腊。 "Poly" 一位 "many" ， "gon" 意味 "angle".
使用svg（1）-画一张星空背景图
weixin_33910759的博客
03-15 818
github网址：github.com/xuhuihui/sv…<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
svg图片拉伸三维图形three.js
最新发布
08-08
SVG (Scalable Vector Graphics) 是一种基于XML的矢量图像格式，它允许你在Web上创建可缩放的、分辨率无关的图形。然而，SVG本身并不直接支持三维效果，它是二维的。 Three.js 是一款基于JavaScript的开源库，专...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值