SVG
文章平均质量分 75
书和咖啡
学习python的小侠客
展开
-
SVG 滤镜
本节我们学习 SVG 中滤镜,SVG 滤镜是滤镜中的一个类型,用来向形状和文本添加特殊的效果。SVG的可用滤镜在 SVG 中,可用滤镜如下所示,我们可以同时在每个 SVG 元素中使用多个滤镜:滤镜描述feBlend把两个对象组合在一起,使它们受特定的混合模式控制feColorMatrix基于转换矩阵对颜色进行变换,每一像素的颜色值都经过矩阵计算出新颜色feComponentTransfer重新定义所有四个颜色通道R、G、B和AfeComposite用于将两原创 2021-01-26 11:13:50 · 253 阅读 · 0 评论 -
SVG 径向渐变
上一节我们讲的是线性渐变,本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心,颜色值沿半径方向进行渐变。如何创建径向渐变我们可以通过 <radialGradient> 元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多,也是嵌套在 <defs> 元素中使用,在使用时需要定义一个唯一的 id 名称,然后通过 fill 属性引用。示例:定义一个径向渐变的圆:<!DOCTYPE html><html> <head&g原创 2021-01-21 11:03:18 · 491 阅读 · 0 评论 -
SVG 线性渐变
本节我们学习 SVG 中的渐变。首先我们需要弄清楚什么是渐变,SVG 中的渐变可以理解为一种颜色到另外一种颜色的过渡,而这种颜色的过渡又分为两种形式,即线性渐变和径向渐变。本节我们会先学习线性渐变。什么是线性渐变我们先来看线性渐变,线性渐变就是直线的渐变,例如将不同的颜色从左向右进行渐变。我们可以使用 <linearGradient> 元素来定义线性渐变,这个元素必须嵌套在 <defs> 元素内部,<defs> 元素可以对渐变这类元素进行定义。示例:我们先来看一个原创 2021-01-18 13:35:25 · 574 阅读 · 0 评论 -
SVG 路径
本节我们学习 SVG 中路径,在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大,既可以创建基本的图形,也可以创建更复杂的形状。<path> 路径是由一些命令来控制的,每个命令对应一个字母,字母区分大小写。SVG中的path命令<path> 元素可以用于定义路径,元素中有一个 d 属性,这个 d 属性是一系列命令的集合。<path> 元素中支持下列命令,如果是大写命令表示绝对定位,小写则表示相对定位:原创 2021-01-14 11:43:33 · 830 阅读 · 0 评论 -
SVG 绘制多边形
本节我们来学习如何在 SVG 中绘制多边形,多边形就是由三条或三条以上的线段首尾顺次连接所组成的平面图形。如何绘制多边形绘制多边形可以使用 SVG 中的 <polygon> 元素,通过元素中的 points 属性确定各个点的位置,和 <polyline> 元素差不多。示例:例如绘制一个六边形:<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2021-01-12 10:49:39 · 1121 阅读 · 0 评论 -
SVG 绘制曲折线
本节我们来学习如何在 SVG 中绘制曲折线,绘制曲折线可以使用 <polyline> 元素来实现。如何绘制曲折线曲折线就是通过一系列的直线连接多个点,然后组合成任意形状。曲折线可以通过 SVG 中的 <polyline> 元素来绘制。<polyline> 元素中的 points 属性用于定义绘制折线所需的点列表,即 x 和 y 坐标对。x 坐标和 y 坐标之间使用逗号分隔,坐标对之间使用空格分隔。语法格式:<polyline points="x1,y1 x2原创 2021-01-06 13:08:17 · 2382 阅读 · 0 评论 -
SVG 绘制直线
本节我们来学习如何在 SVG 中绘制直线,要绘制直线可以使用 <line> 元素来实现。如何绘制直线我们可以使用 <line> 元素在 SVG 图像内部来绘制线条,要绘制直线,首先要确定直线起点与重点的位置。可以通过元素中的属性来绘制水平直线、垂直直线、斜角直线等。绘制直线时需要用到四个属性,如下所示:x1: 定义线条在 x 轴的起始坐标。x2: 定义线条在 x 轴的结束坐标。y1: 定义线条在 y 轴的开始坐标。y2: 定义线条在 y 轴的结束坐标。示例:例如原创 2021-01-04 11:20:48 · 4242 阅读 · 0 评论 -
SVG 绘制椭圆
本节我们来学习如何在 SVG 中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆 x 轴和 y 轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时, 可以通过 cx 和 cy 属性确定椭圆的圆心,rx 设置椭圆的 x 轴的半径,ry 设置 y 轴的半径。示例:例如下面这个例子:<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2020-12-30 11:11:31 · 1437 阅读 · 0 评论 -
SVG 绘制圆形
本节我们来学习如何在 SVG 中绘制圆形,圆形也是 SVG 的基本形状之一,我们可以通过 <circle> 元素来绘制原型。如何绘制一个圆形要绘制圆形可以通过 <circle> 元素来实现,在绘制圆形时,我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性,半径需要用到 r 属性。除此之外,还可以使用 fill 属性圆进行颜色填充,stroke 属性进行描边等。示例:例如我们创建一个圆:<!DOCTYPE html><html&原创 2020-12-28 11:01:02 · 3799 阅读 · 0 评论 -
SVG 绘制矩形
本节我们来学习 SVG 中的矩形。SVG 中设有一些预定义的形状元素,我们可以直接通过这些元素来绘制图形。基本图形有如下几种:元素图形<rect>矩形<circle>圆形<ellipse>椭圆<line>线<polyline>折线<polygon>多边形<path>路径直接在 <svg> 元素内使用上述图形元素,就可以轻松绘制出图形啦原创 2020-12-23 11:14:53 · 1938 阅读 · 0 评论 -
SVG 坐标系统
在开始学习如何绘图之前,我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由 x 轴(水平横向延伸)和 y 轴(垂直纵向延伸)交织组成,交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值,反之为负值,沿 y 轴向上为正值,反之为负值。而 SVG 网格坐标系统的特点如下所示:以左上角为坐标系的原点,即 (0,0)。横向延伸为 X 轴正方向, x 坐标逐渐增大。纵向为 Y 轴正方向原创 2020-12-21 09:34:45 · 894 阅读 · 0 评论 -
SVG 简介
什么是SVGSVG 是 Scalable Vector Graphics 的首字母缩写,翻译成中文表示可缩放矢量图形。可缩放我们知道,那矢量图形又是什么呀,矢量图也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象,每个对象都是一个自成一体的实体,它具有颜色、形状、大小、轮廓、和屏幕位置等属性。SVG 是 W3C 推出的基于 XML 的二维矢量图形标准,也就是一种用于描述二维的矢量图形。SVG 可以提供高质量的矢量图形渲染,同时由于支持 JavaScript 和原创 2020-12-16 11:18:24 · 749 阅读 · 0 评论