SVG学习

   日期:2024-12-27     作者:ira0v      
核心提示:SVG 有一些预定义的形状元素,可被开发者使用和操作: w3c SVG 教程 菜鸟 SVG 实例 | 菜鸟教程 MDN SVG 教程 - SVG&

SVG 有一些预定义的形状元素,可被开发者使用和操作

w3c SVG 教程

SVG学习

菜鸟 SVG 实例 | 菜鸟教程

MDN SVG 教程 - SVG:可缩放矢量图形 | MDN

g元素可以把若干个基本形状编成一个组。

SVG 文件全局有效的规则是“后来居上”,越后面的元素越可见。

常用形状

  • 矩形
  • 圆形
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 路径
  • 文字

矩形 rect 例子

 

代码解释

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  • rx 属性定义水平半径; ry默认跟rx一样的值 可单独设置
  • x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px
  • y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px
  • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1

圆形 circle 例子

 

代码解释

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

椭圆 ellipse 例子

 

代码解释

  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

线条 line 例子

 

代码解释

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

多边形 polygon 例子

 

代码解释

points 属性定义多边形每个角的 x 和 y 坐标

折线 polyline 例子

 

代码解释

points 属性定义折线每个角的 x 和 y 坐标

路径 path 例子

 

代码解释

d - SVG:可缩放矢量图形 | MDN

下面的命令可用于路径数据

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

移动到:M、m

画线至:L、l、H、h、V、v

三次方贝塞尔曲线:C、c、S、s

二次方贝塞尔曲线:Q、q、T、t

椭圆曲线:A、a

封闭路径:Z、z

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

 

椭圆曲线

 

文本 text 例子

 

代码解释

x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符,耗尽他们最后一个字符之后放置的位置。 0是默认"

y="列表的Y轴位置。(参考x)0是默认"

text-anchor用于决定文本流方向 start | middle | end | inherit

transform 属性: rotate(30 20,40) 第一个参数30是角度; 20,40是旋转中心

下列每个属性可以被设置为一个 SVG 属性或者成为一个 CSS 声明

font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

tspan元素

用来标记大块文本的子部分,它必须是一个text元素或别的tspan元素的子元素。

dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。(参考x"

dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。(参考x"

rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值"

textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。(默认:正常文本的长度"

lengthAdjust="告诉查看器,如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'

tref元素

允许引用已经定义的文本,高效地把它复制到当前位置。你可以使用xlink:href属性,把它指向一个元素,取得其文本内容。你可以独立于源样式化它、修改它的外观。

textPath元素

利用它的xlink:href属性取得一个任意路径,把字符对齐到路径,于是字体会环绕路径、顺着路径走。

填充和边框

fill 填充属性

fil-opacity 透明度 0~1

stroke 边框属性

stroke-opacity 透明度 0~1

stroke-width 宽度

stroke-linecap 边框重点的形状 butt 90度垂直 | square 直角封闭 | round 圆角封闭

stroke-linejoin 描边线段连接 miter 默认连接处形成尖角 | round 圆角连接 | bevel 形成斜接

stroke-dasharray 虚线描边 (数字必须用逗号分割 空格会被忽略

渐变

线性渐变 linearGradient 和径向渐变 radialGradient 必须给渐变内容指定一个id

为了让渐变能被重复使用,渐变内容需要定义在标签内部,而不是定义在形状上面

 
 

线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色,偏移量应该始终从0%(0)开始到100%(1) 结束。

linearGradient 渐变方向可以通过两个点来控制 x1,x2,y1,y2 默认是水平方向

径向渐变是从一个点开始发散绘制渐变

 

radialGradient 的也是通过两个stop节点来定义其边缘位置,第一个点定义了渐变结束所围绕的圆环,由一个中心点 cx, cy属性及半径r来定义。 第二个点被称为焦点,由fx,fy属性定义,描述了渐变的中心(默认与中心点一致)。

spreadMethod属性控制渐变到达终点的行为 pad 默认 | reflect 渐变持续但反转颜色 | repeat 重复渐变

图案

patterns 也需要放在SVG文档的内部

pattern元素内部可以包含其它的基本形状。关于 pattern 容易混淆的事是,pattern 定义了一个单元系统以及他们的大小。上例中,我们在 pattern 元素上定义了width和height属性,用于描述在重复下一个图案之前应该跨过多远。

 
 

动画

动画元素放在形状元素的内部.

用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里,属性从开始值变成结束值, attributeName用来指定变化的属性

元素定义了一个元素如何沿着运动路径进行移动

元素变动了目标元素上的一个变形属性,从而允许动画控制转换、缩放、旋转或斜切

剪切和遮罩

在 (100,100) 创建一个圆形,半径是 100。

属性clip-path引用了一个带单个 rect 元素的元素。

它内部的这个矩形将把画布的上半部分涂黑。注意,clipPath元素经常放在一个defs元素内。

 

滤镜

 

transform

跟css3中的语法基本一致

transform - SVG:可缩放矢量图形 | MDN

全部demo.svg

 

五年web前端经验 

H5静态页面   需要交互  联调接口的项目   bug解决

     本文地址:http://w.yusign.com/tjnews/3038.html    述古往 http://w.yusign.com/static/ , 查看更多
 
标签: 属性 定义
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0
 
更多>同类生活信息

相关文章
最新文章
推荐文章
推荐图文
生活信息
点击排行
{
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号