贵州网站建设营销公司,资兴做网站公司,全网营销整合营销,网络舆情监测服务SVG 基础图形 SVG包含了以下的基础图形元素#xff1a; 矩形#xff08;包括可选的圆角#xff09;#xff0c;使用rect元素创建圆形#xff0c;使用circle元素创建椭圆形#xff0c;使用ellipse元素创建直线#xff0c;使用line元素创… SVG 基础图形 SVG包含了以下的基础图形元素 矩形包括可选的圆角使用rect元素创建圆形使用circle元素创建椭圆形使用ellipse元素创建直线使用line元素创建折线使用polyline元素创建多边形使用polygon元素创建理论上这些基础图形元素都能用path元素来构建的相同的图形。并且所有可用于path元素的属性都可以应用在这些基础图形上。 rect 元素 rect元素定义了一个与当前用户坐标系轴对齐的矩形。而圆角的矩形可以通过设置元素的 rx 和 ry属性来实现。 属性定义 x 坐标点矩形左上角在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。y 坐标点矩形左上角在当前用户坐标系中的y轴坐标默认值为0。是否可动画是。width 长度矩形宽度默认值为0。是否可动画是。height 长度矩形高度默认值为0。是否可动画是。rx 长度矩形X轴的圆角半径默认值为0。是否可动画是。ry 长度矩形y轴的圆角半径默认值为0。是否可动画是。圆角规则 rx和ry必须是一个长度值。如果没有对rx和ry给出定义那么它们都会被设为0。 (这样他们会是一个尖角的矩形)如果只对rx进行了赋值那么ry会自动被设置为与rx相等的值。如果只对ry进行了赋值那么rx会自动被设置为与ry相等的值。如果rx的值大于自身宽度的一半那么它会被设置为自身宽度一半。如果ry的值大于自身高度的一半那么它会被设置为自身高度一半。DEMO 1 svg xmlnshttp://www.w3.org/2000/svg width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
2 rect x50 y50 width200 height100 fill#cd5c5c/rect
3 /svg
4 svg xmlnshttp://www.w3.org/2000/svg width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
5 rect x50 y50 rx15 ry15 width200 height100 fill#cd5c5c/rect
6 /svg circle 元素 circle元素定义了一个圆形。 属性定义 cx 坐标点圆心在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。cy 坐标点圆心在当前用户坐标系中的y轴坐标默认值为0。是否可动画是。r 长度圆的半径。是否可动画是。DEMO: 1 svg xmlnshttp://www.w3.org/2000/svg width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
2 circle cx150 cy100 r70 fill#cd5c5c/circle
3 /svg ellipse 元素 ellipse元素定义了一个椭圆。 属性定义 cx 坐标点圆心在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。cy 坐标点圆心在当前用户坐标系中的y轴坐标默认值为0。是否可动画是。rx 长度圆的x轴半径。是否可动画是。ry 长度圆的y轴半径。是否可动画是。DEMO line 元素 line元素定义了一个处于两点之间的直线。 属性定义 x1 坐标点起点在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。y1 坐标点起点在当前用户坐标系中的y轴坐标默认值为0。是否可动画是。x2 坐标点终点在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。y2 坐标点终点在当前用户坐标系中的x轴坐标默认值为0。是否可动画是。因为line元素在几何关系上是一个一维的图形所以它没有内部的这个概念也无法在该元素上使用fill属性。 DEMO 1 svg xmlnshttp://www.w3.org/2000/svg width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
2 line x150 y150 x2250 y2150 stroke-width5 stroke#cd5c5c /
3 /svg polyline 元素 polyline元素定义了一个由多条相连的直线段而成的非闭合图形。 属性定义 points 多组的坐标点由points属性中的坐标点相连而成的图形。DEMO 1 svg xmlnshttp://www.w3.org/2000/svg version1.1 width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
2 polyline fillnone stroke#cd5c5c stroke-width5 points50,50 260,50 260,150 50,150 /
3 /svg polygon 元素 polygon元素定义了一个由多条相连的直线段而成的闭合图形。 属性定义 points 多组的坐标点与polyline元素相同也是由points属性中的坐标点相连而成的图形但起始点也会相连。DEMO 1 svg xmlnshttp://www.w3.org/2000/svg version1.1 width300 height200 viewBox0 0 300 200 styleborder:1px dashed #aaa;
2 polygon fillnone stroke#cd5c5c stroke-width5 points50,50 260,50 260,150 50,150 /
3 /svg 转载于:https://www.cnblogs.com/WhiteCusp/p/4170616.html
