使用svg（1）-画一张星空背景图

最新推荐文章于 2024-05-07 02:37:54 发布
最新推荐文章于 2024-05-07 02:37:54 发布
阅读量791 收藏 2
点赞数
文章标签： python matlab
原文链接：https://juejin.im/post/5aa78cd35188255574595f05
版权

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">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #001122;
      line-height: 0;
      font-size: 0;
    }
  </style>
</head>
<body>
  <svg width="100%" height="100%" viewBox="-400 -300 800 600" 
      preserveAspectRatio="xMidYMid slice">
    <!-- 星星 -->
    <defs>
      <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white">
      </polygon>
    </defs>
    <!-- 湖面部分 -->
    <g id="real">
      <!-- 星星背景 -->
      <g id="star-group" width="100%" height="80%"></g>
      <!-- 月亮部分 -->
      <g id="moon-group">
        <!-- 创建蒙版，显示月牙部分 -->
        <mask id="moon-mask">
          <circle cx="-250" cy="-150" r="100" fill="white"></circle>
          <circle cx="-200" cy="-200" r="100" fill="black"></circle>
        </mask>
        <!-- 月亮 -->
        <circle cx="-250" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"></circle>      </g>      <!-- 灯塔部分 -->      <g id="light-tower" transform="translate(250,0)">        <defs>          <!-- 灯塔的颜色，线性渐变 -->          <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">            <stop offset="0" stop-color="#999"></stop>            <stop offset="1" stop-color="#333"></stop>          </linearGradient>          <!-- 灯光的颜色，径向渐变 -->          <radialGradient id="light" cx="0.5" cy="0.5" r="0.5">            <stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>            <stop offset="1" stop-color="rgba(255,255,255,0)"></stop>          </radialGradient>          <!-- 光圈三角形路径 -->          <clipPath id="light-clip">            <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,.5)">              <animateTransform attributeName="transform" attributeType="XML" 
              type="rotate" from="0" to="360" dur="10s" 
              repeatCount="indefinite"></animateTransform> 
           </polygon>
            <!-- 灯光发射点 -->
            <circle cx="0" cy="0" r="2"></circle>
          </clipPath>
        </defs>
        <!-- 灯塔 -->
        <polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
        <!-- 灯光 -->
        <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" 
        clip-path="url(#light-clip)"></ellipse>
      </g>
    </g>
    <!-- 绘制反射,倒影部分 -->
    <g id="reflact" transform="translate(0,50)" 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.3)"></stop>
          <stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop>
        </linearGradient>
        <mask id="fading">
          <!-- 倒影 -->
          <rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
        </mask>
      </defs>
      <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use>
      <line x1="-400" y1="0" x2="400" y2="0" stroke="white"></line>
    </g>
  </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');
    renderStar();    // 创建引用的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();
    }
    function renderStar() {
      var starRef = document.getElementById('star');
      // console.log(starRef)
      var starGroup = document.getElementById('star-group');
      var starCount = 500;
      var star;
      while (starCount--) {
        star = use(starRef);
        //改变透明度，位置和大小
        star.setAttribute('opacity', random(0.1, 0.4));
        star.setAttribute('transform', 
         'translate(' + random(-400, 400) + ',' + random(-300, 300) + ')'
          + 'scale(' + random(0.1, 0.6) + ')');
        starGroup.appendChild(star); //添加星星
      }
    }
  </script>
</body>
</html>
复制代码


转载于:https://juejin.im/post/5aa78cd35188255574595f05

weixin_33910759
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 SVG天空星星背景特效
06-24
HTML5 SVG天空星星背景特效是一款基于svg绘制黑夜里的北极光星星闪烁动态背景特效。
用Python求数学题中阴影部分面积_python编写程序,求出图5
m0_60707685的博客
04-26 648
三、源码设计1.做图源码2.计算源码，其中side是要不要计算图形边框上的点，理论上side只能为True；t设置越大运行时间越长也越精准四、最后小结1.此种算法t为100时，阴影面积为1.268；t为1000时，阴影面积为1.253，已经非常接近正确答案（正确答案1.252）2.举一反三，类似于这种不规则的面积，只要可以写出来函数，就可以求解面积.2.下面有三种求解方法，第三种表示比大学高数还难看懂，你们呢？如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费。
整点小浪漫——Python27行代码绘制一幅满天星_python浪漫星空代码
最新发布
2401_84572752的博客
05-07 1025
这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。最近我才对这些路线做了一下新的更新，知识体系更全面了。包含了Python入门、爬虫、数据分析和web开发的学习视频，总共100多个，虽然没有那么全面，但是对于入门来说是没问题的，学完这些之后，你可以按照我上面的学习路线去网上找其他的知识资源进行进阶。
SVG绘制星空
javscp_q的博客
09-01 481
利用SVG绘制一片星空 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG星空</title> <style type="text/css"> *{padding: 0;margin: 0;} html,bod...
html中svg修改背景颜色,在用作背景图像时修改SVG填充颜色
weixin_29306875的博客
06-09 3498
在用作背景图像时修改SVG填充颜色将SVG输出直接放在页面代码中，我可以简单地用CSS修改填充颜色，如下所示：polygon.mystar{fill:blue;}circle.mycircle{fill:green;}这很好用，但是当SVG作为背景图像时，我正在寻找一种修改SVG的“填充”属性的方法。html{background-image:url(../img/bg.svg);}我...
SVG绘制星空效果
dianju8374的博客
07-19 376
主要代码： 代码详见GitHub：https://github.com/toly1994328/svg-night： svg星空 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
svg用作背景图
u011927449的博客
11-05 8653
svg用做背景图的几种方式 1. 直接使用 background: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="10" ...
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
工控用素材图片及动画svg-gif-png
03-22
工控用素材图片及动画svg-gif-png
svg-css-logo-animation:使用CSS动画完成SVG徽标动画
05-24
在本项目中，“svg-css-logo-animation”展示了如何利用CSS动画技术为SVG（可缩放矢量图形）徽标创建动态效果。SVG是一种基于XML的图形格式，它支持精确的矢量图形，这意味着无论放大多少倍，图像都能保持清晰。与...
html5 svg夜空中星星流星动画场景特效
06-11
html5 canvas画布基于svg绘制的人物在山坡上看着夜空中星星流星动画场景特效。
使用SVG做网页背景
Housz的博客
08-08 9930
使用重复的SVG图案（SVG Patterns）作为网页的背景，与传统的CSS相比有很多优点。本文介绍SVG制作网页背景的优势，并简要概括方法、相关资源和浏览器支持情况。 SVG上手教程： SVG上手 Viewport and viewBox 1. CSS方法 首先看看传统的CSS方法如何将重复图案用作网页背景。原理很简单，我们将图案的URL指定给CSS的background属性（本例中...
svg绘制标尺和网格背景
wayhb的专栏
05-17 3598
目录 1，效果图 2，原理 3，代码 网页上绘制背景网格和标尺有多种方法， a），使用css的border-bottom属性绘制，优点是简单，缺点是难以控制尺寸伸缩； b），使用canvas绘制，优点是可以动态控制，缺点是canvas会产生锯齿，不清晰等情况； c），使用svg来绘制，优点是可以动态控制切清晰，缺点是难度稍大，好在使用snap.svg可以很好的简化代码。 1，效果图 2，原理 采用svg插件snap.svg，地址：htt...
SVG绘制图形
u011927449的博客
05-08 813
一、SVG介绍 1、SVG指可伸缩矢量图片 2、SVG用来定义用于网络的基于矢量的图形 3、SVG使用XML格式定义图形 4、SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5、SVG是万维网联盟的标准 二、SVG的优势 1、SVG图像可通过文本编辑器来创建和修改 2、SVG图像可被搜索、索引、脚本化或压缩 3、SVG是可伸缩的 4、SVG图像可在任何分辨率下被高质量地打印 5、SVG可在图像质量不下降的情况下被放大。 三、绘制SVG图形 <!--绘制圆形 fill为填充颜色、stroke为
svg图形的绘制
sh2001824的博客
07-16 4808
svg图形的绘制
用 Canvas 编织璀璨星空图
熊宗的博客
11-04 1610
先来看看最终的效果： GitHub项目: CyandevToys / ParticleWeb 是不是还蛮酷的呢？本文我们就来一点一点分析怎么实现它！ 分析 首先我们看看这个效果具体有那些要点。首先，这么炫酷的效果肯定是要用到 Canvas 了，每个星星可以看作为一个粒子，因此，整个效果实际上就是粒子系统了。此外，我们可以发现每个粒子之间是相互连接的，只不过离的近的粒子之间的
用CSS Houdini画一片星空
weixin_33672400的博客
04-22 403
要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么？谷歌开发者文档列了几个demo，我们先来看一下这几个demo：（1）给textarea加一个方格背景（demo）使用以下CSS代码：textarea { backgro...
酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
zhichaosong的博客
06-13 4177
官方给的例子有点复杂，项目中一般就引一个 JS 文件然后调用好了，简单粗暴，网上很少有想要的效果，而且都没有源码，这里分享一个 文章目录一、源码地址二、实现效果1. 电脑端2. 手机端三、源码 一、源码地址 官方地址：https://github.com/VincentGarreau/particles.js demo地址：https://github.com/zhichaosong/par...
swing svg背景图
06-10
你可以使用JPanel作为容器，在JPanel中使用JLabel来显示SVG图像。首先，使用Apache Batik库将SVG图像转换为BufferedImage，然后将BufferedImage设置为JLabel的图像，最后将JLabel添加到JPanel中。以下是一个简单的示例代码： ```java import java.awt.Dimension; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.File; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import org.apache.batik.transcoder.TranscoderException; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.TranscodingHints; import org.apache.batik.transcoder.image.ImageTranscoder; import org.apache.batik.util.SVGConstants; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.svg.SVGDocument; import org.w3c.dom.svg.SVGRect; public class SVGBackgroundPanel extends JPanel { private BufferedImage image; public SVGBackgroundPanel(String svgFilePath) { try { File file = new File(svgFilePath); SVGDocument svgDocument = (SVGDocument) org.apache.batik.dom.svg.SVGDOMImplementation .getDOMImplementation().createDocument(SVGConstants.SVG_NAMESPACE_URI, "svg", null); TranscodingHints transcodingHints = new TranscodingHints(); transcodingHints.put(ImageTranscoder.KEY_WIDTH, (float) getWidth()); transcodingHints.put(ImageTranscoder.KEY_HEIGHT, (float) getHeight()); TranscoderInput transcoderInput = new TranscoderInput(file.toURI().toString()); ImageTranscoder imageTranscoder = new ImageTranscoder() { @Override public BufferedImage createImage(int width, int height) { return new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); } @Override public void writeImage(BufferedImage img, TranscoderOutput output) throws TranscoderException { image = img; } }; imageTranscoder.setTranscodingHints(transcodingHints); imageTranscoder.transcode(transcoderInput, null); } catch (Exception e) { e.printStackTrace(); } } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); if (image != null) { g.drawImage(image, 0, 0, null); } } @Override public Dimension getPreferredSize() { if (image != null) { return new Dimension(image.getWidth(), image.getHeight()); } return super.getPreferredSize(); } public static void main(String[] args) { JFrame frame = new JFrame(); JPanel panel = new SVGBackgroundPanel("path/to/your/svg/file.svg"); frame.add(panel); frame.pack(); frame.setVisible(true); } } ``` 在上面的代码中，我们使用了Apache Batik库中的ImageTranscoder类来将SVG文件转换为BufferedImage。在构造函数中，我们加载SVG文件并将其转换为BufferedImage，然后在paintComponent()方法中将其绘制在JPanel上。我们还覆盖了getPreferredSize()方法来确保JPanel的大小与图像的大小相同。最后，在main()方法中，我们创建了一个JFrame，并将SVGBackgroundPanel添加到其中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值