热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

可视化领域SVG

本文主要分享【国内有哪些可视化公司】,技术文章【可视化领域SVG】为【前端小草籽】投稿,如果你遇到小游戏开发相关问题,本文相关知识或能到你。国内有哪些可视化公司目录1.什么是可视化?

本文主要分享【国内有哪些可视化公司】,技术文章【可视化领域 SVG】为【前端小草籽】投稿,如果你遇到小游戏开发相关问题,本文相关知识或能到你。

国内有哪些可视化公司

目录

1.什么是可视化?

2.SVG的使用方式

1.使用方法

2. SVG默认宽高

3.基础图形

1.矩形

设置矩形位置

2.圆角矩形

3.rect版的圆形

4.圆形 circle

5.椭圆 ellipse

5.直线 line

6.折线 polyline

7.多边形 polygon

8.直线路径 path


1.什么是可视化?

在学习 SVG 之前,首先要了解 位图 和 矢量图 的区别。

简单来说:

位图:放大会失真图像边缘有锯齿;是由像素点组成;前端的  Canvas 就是位图效果。矢量图:放大不会失真;使用  XML 描述图形。

左边是位图,右边是矢量图

那么 SVG 是什么呢?它是矢量图的其中一种格式。它是用 XML 来描述图形的

对于初学 SVG 的前端来说,可以简单的理解为 SVG 是一套新标签”

所以可以使用 CSS 来设置样式,也可以使用 JS 对 SVG 进行操作

2.SVG的使用方式 1.使用方法

SVG 的使用方式有很多种,我最推荐直接在 HTML 中直接使用,也就是直接当 HTML 标签使用。

这里记录了几种使用方法:

在浏览器直接打开内嵌到  HTML 中(推荐⭐⭐⭐) CSS 背景图(推荐⭐)使用  img 标签引入(推荐⭐)使用  iframe 标签引入(不推荐❌)使用  embed 标签引入(不推荐❌)使用  object 标签引入(不推荐❌)
2. SVG默认宽高

在 HTML 中使用 SVG ,直接用   标签即可


  

在不给   设置宽高时,它的默认宽度是 300px ,默认高度是 150px 。这点和   是一样的。

3.基础图形

HTML 的元素大多数默认都是矩形,SVG 在形状上更加丰富。

1.矩形

矩形使用 标签,默认填充色是黑色,当只设置宽高时,渲染出来的矩形就是黑色的矩形。

稍后还会说明如何设置样式(比如边框、填充色等),这里只列出矩形基础属性:

x: 左上角x轴坐标 y: 左上角y轴坐标 width: 宽度 height: 高度 rx: 圆角,x轴的半径 ry: 圆角,y轴的半径

eg: 基础款(只设置宽高)


   
    
  
设置矩形位置

 通过 x 和 y 可以设置矩形位置


   
    
    
  
2.圆角矩形


   
    
    
  

rx 是设置x轴的半径,ry 设置y轴的半径。

rx 的最大值是矩形宽度的一半,ry 的最大值是矩形高度的一半。

当只设置 rx 或者 ry 其中一个值时,另一个属性也会使用一样的值。


   
    
    
  

此时 rx 和 ry 都是 30。

3.rect版的圆形

圆角的概念和 CSS 的 border-radius 有点像,所以有没有一种可能,用   也可以画圆形呢?


   
    
    
  

只要把宽高设成一样,圆角设成宽度的一半就能实现圆形。这是在 HTML 里的实现方式之一。

同理也用   实现椭圆,但在 SVG 中是不会这样做的。因为 SVG 里有专门的圆形和椭圆的标签。

4.圆形 circle

圆形使用   标签,基础属性有:

cx: 圆心在x轴的坐标 cy: 圆心在y轴的坐标 r: 半径


   
    
    
  
5.椭圆 ellipse

椭圆使用   标签,基础属性有:

cx: 圆心在x轴的坐标 cy: 圆心在y轴的坐标 rx: x轴的半径 ry: y轴的半径


   
    
    
  

 和   差不多,只是将半径拆成x轴和y轴的。

5.直线 line

直线使用   标签,基础属性有:

x1: 起始点x坐标 y1: 起始点y坐标 x2: 结束点x坐标 y2: 结束点y坐标 stroke: 描边颜色


   
    
    
  

只有 x1 和 x2 ,没有 x3 ,也没有 y3 。

需要注意的是,  需要使用设置 stroke 属性才会有绘制效果。

6.折线 polyline

使用   可以绘制折线,基础属性有:

points: 点集 stroke: 描边颜色 fill: 填充颜色


   
    
    
  

points 接受的值是一串点集,点集是两两一组表示一个坐标。

其实点集完全不需要用逗号隔开,上面的例子中我使用了逗号隔开,完全是为了让自己阅读代码时比价易懂。一个逗号分隔一个 xy 坐标。

在绘制折线是,我通常是将 fill 设置成 none ,因为 fill 默认值是黑色,如果不设置成 none 会出现以下效果:


   
    
    
  

 fill 设置成 none 后,必须设置 stroke 为一个有颜色的值,不然不会有渲染效果

7.多边形 polygon

多边形使用   标签,基础属性和   差不多:

points: 点集 stroke: 描边颜色 fill: 填充颜色

 会自动闭合(自动将起始点和结束点链接起来)。


   
    
  
8.直线路径 path

其实在 SVG 里,所有基本图形都是   的简写。所有描述轮廓的数据都放在 d 属性里,d 是 data 的简写。

d 属性又包括以下主要的关键字(注意大小写!):

M: 起始点坐标, moveto 的意思。每个路径都必须以 M 开始。 M 传入 xy 坐标,用逗号或者空格隔开。 L: 轮廓坐标, lineto 的意思。 L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个 绝对位置。l: 这是小写 L,和 L 的作用差不多,但 l 是一个 相对位置H: 和上一个点的Y坐标相等,是 horizontal lineto 的意思。它是一个 绝对位置h: 和 H 差不多,但 h 使用的是 相对定位V: 和上一个点的X坐标相等,是 vertical lineto 的意思。它是一个 绝对位置v: 这是一个小写的 v ,和大写 V 的差不多,但小写 v 是一个相对定位。 Z: 关闭当前路径, closepath 的意思。它会绘制一条直线回到当前子路径的起点。

本文《可视化领域 SVG》版权归前端小草籽所有,引用可视化领域 SVG需遵循CC 4.0 BY-SA版权协议。


推荐阅读
  • 资源管理器的基础架构包括三个核心组件:1)资源池,用于将CPU和内存等资源分配给不同的容器;2)负载组,负责承载任务并将其分配到相应的资源池;3)分类函数,用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ... [详细]
  • 单链表的高效遍历及性能优化策略
    本文探讨了单链表的高效遍历方法及其性能优化策略。在单链表的数据结构中,插入操作的时间复杂度为O(n),而遍历操作的时间复杂度为O(n^2)。通过在 `LinkList.h` 和 `main.cpp` 文件中对单链表进行封装,我们实现了创建和销毁功能的优化,提高了单链表的使用效率。此外,文章还介绍了几种常见的优化技术,如缓存节点指针和批量处理,以进一步提升遍历性能。 ... [详细]
  • 如何在页面底部添加倾斜样式效果? ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • iOS 设备唯一标识获取的高效解决方案与实践
    在iOS 7中,苹果公司再次禁止了对MAC地址的访问,使得开发者无法直接获取设备的物理地址。为了在开发过程中实现设备的唯一标识,苹果推荐使用Keychain服务来存储和管理唯一的标识符。此外,还可以结合其他技术手段,如UUID和广告标识符(IDFA),以确保设备的唯一性和安全性。这些方法不仅能够满足应用的需求,还能保护用户的隐私。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 并发编程入门:初探多任务处理技术
    并发编程入门:探索多任务处理技术并发编程是指在单个处理器上高效地管理多个任务的执行过程。其核心在于通过合理分配和协调任务,提高系统的整体性能。主要应用场景包括:1) 将复杂任务分解为多个子任务,并分配给不同的线程,实现并行处理;2) 通过同步机制确保线程间协调一致,避免资源竞争和数据不一致问题。此外,理解并发编程还涉及锁机制、线程池和异步编程等关键技术。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
author-avatar
广东暖暖_小乖
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有