SVG <polygon>
SVG 多边形 - <polygon>
实例 1
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。
polygon来自希腊。 "Poly" 一位 "many" , "gon" 意味 "angle".
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>
对于Opera用户: 查看SVG文件(右键单击SVG图形预览源)。
代码解析:
- points 属性定义多边形每个角的 x 和 y 坐标
实例 2
下面的示例创建一个四边的多边形:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>
对于Opera用户: 查看SVG文件(右键单击SVG图形预览源)。
实例 3
使用 <polygon> 元素创建一个星型:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
对于Opera用户: 查看SVG文件(右键单击SVG图形预览源)。
实例 4
改变 fill-rule 属性为 "evenodd":
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
对于Opera用户: 查看SVG文件(右键单击SVG图形预览源)。
SVG <polyline>
SVG 曲线 - <polyline>
实例 1
<polyline> 元素是用于创建任何只有直线的形状:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
F对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 2
只有直线的另一个例子:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4"/> </svg>
F对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
SVG <path>
SVG 路径 - <path>
<path> 元素用于定义一个路径。
下面的命令可用于路径数据:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
实例 1
上面的例子定义了一条路径,它开始于位置150 0,到达位置75 200,然后从那里开始到225 200,最后在150 0关闭路径。
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
实例 2
使用贝兹曲线流畅的曲线模型,可无限期的缩放。一般情况下,用户选择两个端点和一个或两个控制点。一个一个控制点的贝塞尔曲线被称为二次贝塞尔曲线和两个控制点的那种被称为立方体。
下面的例子创建了一个二次贝塞尔曲线,A和C分别是起点和终点,B是控制点:
下面是SVG代码:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> </svg>
对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。
复杂吗?是的!!由于在绘制路径时的复杂性,强烈建议使用SVG编辑器来创建复杂的图形。
本文: http://www.runoob.com/svg/svg-path.html
相关推荐
<br/>绘制各种高质量的SVG矢量图形,提供包括矩形、椭圆、圆、直线、折线、多边形等在内的基本形状构造。 支持任意形状的路径构造(贝赛尔曲线)。 支持文本构造。 支持栅格图像和SVG图像的导入...
支持的SVG元素和功能形状,直线,文本圆,椭圆,多边形,折线,矩形(包括圆角矩形),直线,文本常规路径,圆弧,三次方和二次贝塞尔曲线路径,图像和渐变图像,linearGradient,radialGradient,变换转换,旋转,...
gpath助手 将 svg 路径转换为 gpath 点以帮助渲染鹅卵石多边形的简单工具 javascript 目前非常混乱,但我稍后会清理它。 目前这仅适用于直线。 但计划增加对曲线的支持。 现场版
一般,弧形,三次和二次贝塞尔曲线路径, 图像和渐变 图片,linearGradient,radialGradient, 变身 平移,旋转,缩放,倾斜X,倾斜Y 动画 animate,animateMotion,animateTranslate,animateRotate,animateScale...
边界和半径筛选剪切路径盒子阴影文字阴影动画片过渡动画和关键帧支持三次贝塞尔曲线编辑器支持时间表编辑器编码与分享支持导出到CodePen 支持代码查看器支持PNG和SVG下载画画支持迷你路径和多边形编辑器支持绘制星形...
丰富的图形Kity 内置了的图形,包括矩形、圆形、椭圆、多边形、自动曲线、直线、正多边形、星形、饼、环、旋转形等等,还有最强大的 Path 工具,可以绘制任意矢量图形 强大的填充能力Kity 对颜色加强了支持,不仅...
2d 形状:正方形、圆形、多边形、路径描边; 3d 形状:立方体、球体、圆柱体、圆锥体、显式曲面; 布尔运算,线性变换; 2d->3d 挤压(线性、圆锥、旋转、曲线); 3d->2d投影和切片; 凸包和 Minkowski 总和(2d、...
支持的SVG元素和功能形状,线条,文字圆,椭圆,多边形,折线,矩形(包括圆角矩形),线,文本,tspan路径一般,弧形,三次和二次贝塞尔曲线路径,图像和渐变图片,linearGradient,radialGradient,变身平移,旋转...
一个相交算法库,涵盖以下SVG形状中的任意两个形状的所有排列: 弧线 二次贝塞尔曲线 立方贝塞尔 圆圈 椭圆 线 路径 多边形 折线 长方形 安装 npm install kld-intersections 输入 以下各节说明如何导入代码以在...
绘制各种高质量的SVG矢量图形,提供包括矩形、椭圆、圆、直线、折线、多边形等在内的基本形状构造。 支持任意形状的路径构造(贝赛尔曲线)。 支持文本构造。 支持栅格图像和SVG图像的导入。 按照命名空间和...
14.1.3基于SVG的地图符号描述模型 14.2点状地图符号的绘制 14.2.1圆的绘制 14.2.2椭圆的绘制 14.2.3多边形的绘制 14.2.4五角星的绘制 14.3线状地图符号的绘制 14.3.1平行线绘制 14.3.2虚线绘制 ...
目录序前言第1章算法设计和分析1.1概述1.2算法设计原则1.3算法复杂性的...多边形是否在矩形中2.8判断矩形是否在矩形中2.9判断圆是否在矩形中2.10判断点是否在多边形内2.10.1射线法2.10.2转角法2.11判断线段...
内置的图形基元支持矩形,椭圆形(贝塞尔曲线)路径,多边形,文本对象和透明度。 教育 DrawBot是教授编程基础知识的理想工具。在熟悉变量,条件语句,函数以及您所拥有的知识的同时,学生可以获得丰富多彩的...
支持所有形状:直线,矩形,圆形,椭圆形,线性路径,弧形,曲线,多边形,svg路径 生成UIBezierPath为CAShapeLayer 使用选项轻松自定义 简单的可组合API 便捷的绘图功能 平台无关的API,可以轻松支持新平台 ...
提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力,同时支持绘制SVG路径。 Github:https://github.com/pshihn/rough 安装 下载链接:https://github.com/pshihn/rough/tree/master/dist NPM npm install ...
Inkscape的功能包括:对象创建-绘图:铅笔工具(带有简单路径的徒手画),钢笔工具(创建贝塞尔曲线和直线的笔迹),书法工具(使用代表书法笔划的填充路径的徒手画)-形状工具:矩形(可能有圆角),椭圆形(包括圆...
支持多边形和形状设计(带有贝塞尔曲线) 实施默认的缩放,旋转,拖动和排列动作 自定义对象类型和自定义面板 示例和演示: : 按键图 参数 默认 del或back 删除当前对象 arrows 将当前对象移动1px shift + ...