热门标签 | 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版权协议。


推荐阅读
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 本文介绍了如何通过C#语言调用动态链接库(DLL)中的函数来实现IC卡的基本操作,包括初始化设备、设置密码模式、获取设备状态等,并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]
  • 深入探讨前端代码优化策略
    本文深入讨论了前端开发中代码优化的关键技术,包括JavaScript、HTML和CSS的优化方法,旨在提升网页加载速度和用户体验。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 本文详细介绍了C++中的构造函数,包括其定义、特点以及如何通过构造函数进行对象的初始化。此外,还探讨了转换构造函数的概念及其在不同情境下的应用,以及如何避免不必要的隐式类型转换。 ... [详细]
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 从CodeIgniter中提取图像处理组件
    本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ... [详细]
  • 本文将从基础概念入手,详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发,以及其背后的源码实现细节。 ... [详细]
  • 回顾两年前春节期间的一个个人项目,该项目原本计划参加竞赛,但最终作为练习项目完成。独自完成了从编码到UI设计的全部工作,尽管代码量不大,但仍有一定的参考价值。本文将详细介绍该项目的背景、功能及技术实现。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
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社区 版权所有