SVG 有一些预定义的形状元素,可被开发者使用和操作。
SVG 形状
SVG 有一些预定义的形状元素,可被开发者使用和操作:
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
下面的章节会为您讲解这些元素,首先从矩形元素开始。
<rect> 标签
<rect> 标签可用来创建矩形,以及矩形的变种。
要理解它的工作原理,请把这些代码拷贝到记事本,然后保存为 "rect1.svg" 文件。把此文件放入web目录中:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/> </svg>
代码解释:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
- style 属性用来定义 CSS 属性
- CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
- CSS 的 stroke-width 属性定义矩形边框的宽度
- CSS 的 stroke 属性定义矩形边框的颜色
让我们看一下另一个包含新属性的例子:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/> </svg>
例子解释:
- x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
- y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
- CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)
为整个元素定义透明度:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; opacity:0.9"/> </svg>
代码解释:
CSS 的 opacity 属性定义整个元素的透明值(合法的范围是:0 - 1)
最后的例子,创建带有圆角的矩形:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/> </svg>
代码解释:
rx 和 ry 属性可使矩形产生圆角。
相关推荐
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题
2.4 <polyline>标签<polyline>标签用于绘制一根折线 2.5 <rect>标签<rect>标签用于绘制矩形 2.6 <ellipse>标签
- 支持解析 <circle>、<ellipse> 元素,以及<rect> 的 rx、ry 属性(圆角矩形)。 - 支持格式为 rgb(ddd, ddd, ddd) 的颜色值 - 支持解析<svg>的width、height属性,解析后的属性值通过path_renderer::width、...
代码只包含一个circlerect.svg和circlerect.html文件,.svg收藏起来,以后用到的时候,可直接使用,不用再费脑筋去想,去查阅资料了。
例如,此SVG将是一个宽度和高度为100像素的矩形( <rect>标签),并将使用checks图案。 < svg height = " 100 " width = " 100 " > < rect xss=removed xss=removed xss=removed></ rec
<div id="kity_paper"></div>[removed] var paper = new kity.Paper('kity_paper'); var rect = paper.put(new kity.Rect()); var text = paper.put(new kity.Text()); text.setContent('...
omsvg 概述 可扩展的矢量图形SVG非常棒。 omsvg软件包使您可以使用R编程语言制作SVG ,并且尝试使整个过程的难度降低一些。... svg_rect( x = 25 , y = 25 , width = 50 , height = 50 , fill = " yellow " ) % >
应用程序,允许将svg rect绘制到绘图区域上。 对于,请拖出一些矩形,并在每次拖曳的末尾仔细观察项目从“正在创建的项目”过渡到“已保存的项目之一”的过程。 您会在许多情况下看到闪烁。 先绘制几个小矩形,然后...
SVG的视窗位置一般是由CSS指定,尺寸由SVG元素的属性width和height设置,但是如果SVG是存储在embedded对象中(例如object元素,或者其他SVG元素),而且包含SVG的文档是用CSS或者XSL格式化的,并且这些外围对象的CSS...
柱形图,是使用柱形的长短来表示数据变化的图表,也是最简单的图表之一。一般情况下,柱形图包括:矩形、坐标轴和文字。 d3简单理解就是通过在svg画布上绘制基本图形,本文将介绍d3绘制基本的柱形图 绘制画布 ...
核心形状为:ko舞台,ko图层,rect矩形,ko圆形,ko椭圆形,ko线,ko图像,ko文本,ko文本路径,ko星形,ko标签, SVG路径,ko-regular-polygon。 您也可以创建自定义形状。 要获取有关Konva更多信息,请阅读。文献...
圆,rect 矩形,line 线条等)的操作。 这里重点说一下d3中的data函数,如下: //创建一个长度为10的整形数组, 得到的是: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] var data = d3.range(10); //然后可以利用这个数组,创建...
资源包括html这种的table和生成的两种方式,一种的是div,一种是table,这两个的效率对比,其次是在H5中的Canvas中的各种图形绘制,包括矩形,各种填充