SVG
文章平均质量分 66
SVG大家一起来进步
Unique·Blue
锄头抡冒烟的码农一枚
展开
-
09——svg中path的使用
path的简单使用原创 2023-05-16 10:48:51 · 2537 阅读 · 0 评论 -
vue球形词云旋转+连线
vue球形词云的实现,基于这篇文章如果不需要词云连线,可到这篇文章中拷贝即可。原创 2023-05-11 09:58:26 · 234 阅读 · 0 评论 -
08——<use>&<defs>标签创建图形引用
在 js中,当我们需要重复使用一个字段,会将它定义为一个变量,在多个地方使用在svg中,当我们需要重复使用一个图形时,要怎么处理呢?一、在html中直接使用使用方式:将图形等放在 <defs> 中提前定义好,并设置 id(defs中可设置多个)用 <use> 标签的 xlink:href 属性指定对应的 id<svg> <defs> <polygon id="star" points="0 0 50 0 25 50" fi.原创 2021-11-29 16:00:06 · 1462 阅读 · 0 评论 -
07——svg中颜色表示的方式 HSL
除了常规的英语单词(如pink), rgb、rgba等颜色表示,svg中还可以使用HSLH(颜色)S(饱和度)L(亮度)A(透明度)H : 取值范围 [0, 359]S、L :取值范围 [0, 100] %A :非必填,取值范围 [0, 1]如:<svg> <rect stroke="hsla(0, 50%, 60%, 0.5)" stroke-width="2" width="100" height="100" fill="none" x="10" y="10">原创 2021-11-29 14:21:35 · 517 阅读 · 0 评论 -
06——svg中坐标变换与顺序的关系
一、什么是坐标变换在svg中,坐标变换 是对 一个坐标系 到 另一个坐标系 的变换的描述在上一篇中我们说到: transform 是 基于前驱坐标系 的 自身坐标系 变换现在我们来亲自试验下,坐标系 与 其前驱坐标系 都变换时,顺序不同有怎样的影响二、坐标变换与顺序的关系(坐标系与前驱坐标系)1、坐标系与前驱坐标系都做 平移<!-- g 先 translate(50, 0),rect 再 translate(0, 50) --><svg width="300" hei原创 2021-11-26 18:31:40 · 1048 阅读 · 0 评论 -
05——svg的坐标系统和坐标系
一、什么是svg的坐标系统众所周知,数学上的坐标系统,大部分是指笛卡尔直角坐标系并且:x轴向右,y轴向上,角度为逆时针在svg中,坐标系统同样也是笛卡尔直角坐标系,x轴向右但是:y轴向下,角度为 顺时针二、什么是svg的坐标系?在svg中,共有4种坐标系:用户坐标系自身坐标系前驱坐标系参考坐标系我们来逐个了解一下1、用户坐标系即世界坐标系,指的是最原始的svg坐标系2、自身坐标系图形元素或分组本身具有的坐标系3、前驱坐标系即父级坐标系。自身坐标系不发生变换的情原创 2021-11-25 18:25:37 · 2355 阅读 · 0 评论 -
04——svg中的图形分组<g>
一、在svg中,使用 <g> 标签来创建分组<g> 标签内部的图形,会继承其属性<g> 可以使用 transform 属性进行坐标变换,变换之后可以理解为新的自身坐标系<g> 标签可以嵌套使用二、<g> 分组坐标变换的实例<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <g stroke="green"原创 2021-11-25 16:28:20 · 2616 阅读 · 0 评论 -
03——用 js 创建svg
实际使用svg中,我们经常会用js去操作svg一、核心API:1、创建图形:ns 指命名空间,tagName 是标签名,例如svg、rectdocument.createElementNS(ns, tagName)2、添加子节点element.appenChild(childElement)3、获取、设置属性element.getAttribute(name)element.setAttribute(name, value)二、实例<div id="svgArea">&原创 2021-11-24 14:16:31 · 3823 阅读 · 0 评论 -
02——svg绘制基本图形,了解常用的属性
多个坐标点的位置集合,傻瓜式写坐标就行,以此类推。重要的是,在svg坐标系中,x轴正方向。这个定义就很简单了,数学上两个点的坐标。然后一起学习下各个图形的属性用法。:与多线段类似,区别是。连起来,形成封闭图形。原创 2021-11-23 18:50:14 · 2367 阅读 · 0 评论 -
01——svg简介及简单使用
一、SVG 意为可缩放矢量图形(Scalable Vector Graphics)svg是使用XML描述的矢量文件。矢量图与位图有什么区别呢?位图是基于像素点对颜色的描述,所以在放大之后会模糊矢量图是基于数学的描述,比如圆形,怎么放大都是个圆二、使用svg的方式img引入css背景使用直接在html中引入直接在浏览器打开直接上代码:1、首先准备一个 rect.svg 的文件<svg xmlns="http://www.w3.org/2000/svg" version=原创 2021-11-23 16:36:16 · 1095 阅读 · 0 评论