SVG基础|绘制SVG直线、折线和多边形 SVG直线SVG <line>元素用于绘制一条。下面是一个绘制直线的例子。<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/><line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/><line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/><line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/> </sv...
SVG图像的viewport和viewBox用于设置图像可见区域的大小。SVG VIEWPORTviewport是SVG图像的可见区域。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。SVG viewport有点类似在浏览器中浏览一个页面。页面可以非常大，它的宽度要比浏览器的视口宽，高度也比浏览器的视口高度高，但是只有在当前屏幕中的页面是可见的区域，你可以在元素中使用width和height属性来指定vie...
SVG直线SVG 连接标记（markers）用于标记一条线或路径的开始、中间个结束位置。你可以在路径的开始处使用圆形或方形表示，在路径的结束处使用一个三角箭头表示。看羡慕的一个简单的例子：<svg xmlns="http://www.w3.org/2000/svg"><defs><marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"><circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/></marker><marker id="markerArrow" mark...
SVG <circle>元素用于绘制一个圆形。<ellipse>元素则用于绘制椭圆形。我们先从圆形说起，下面是一个绘制SVG圆形的例子。<svg xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> </svg>上面代码的返回结果如下：cx和cy表示圆心的坐标，r属性则是圆的半径。 圆形描边你可以在样式中使用stroke属性来设置SVG圆形的描边属性。在上面的例子中，圆形的描边被设置为暗绿色。除了...
SVG的描边属性stroke用于定义图形的描边样式。stroke是一个基本的SVG CSS属性，你可以为任何SVG图形设置描边样式。 STYLE属性 我们可以在SVG图形中使用style属性来为图形设置描边和填充等样式。下面是一个例子：<circle cx="50" cy="50" r="50"style="stroke: #000066; fill: 3333ff;" /> 上面的例子定义了一个圆形，并带有深蓝色的描边和浅蓝色的填充色。 描边示例 使用stroke属性可以为图形设置描边效果。看下面的例...
一个元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。 一个SVG矩形的简单例子 下面是一个绘制SVG矩形的简单例子。SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。 SVG矩形的尺寸由width和height属性决定。 style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。 下面的...
SVG DEFS元素SVG的元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子：在元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用元素来引入它们。如下面的代码所示：要引用元素，必须在元素上设置一个ID，通过ID来引用它。元素通过xlink:href属性来引入元素。注意在ID前面要添加一个#。在元素中，...
SVG坐标系统 坐标系统 一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示： 而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示： SVG坐标系统的单位 你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定单位，...
SVG 元素是用来做什么的呢?元素也是用来绘制文字的，那么它和元素有何不同呢?switch在很多编程语言中都有这个关键字，它是分支的意思，在SVG中，可以使用元素来匹配不同的语言，在不同的浏览器语言环境中显示不同的SVG文字。 典型的用法是用于显示不同的文字，但是你不可以用它来显示不同的图形。看下面的简单例子：如果你的浏览器是中文环境的，那么上面的代码会显示“中文”两个字，如果是英文环境的，就会看到“English”。看...
SVG的元素用于定义一些复杂的图形。它可以结合使用直线，曲线等来制作各种不规则的图形。元素是SVG基本图形中最为复杂的一个。要掌握和理解它也需要下一点苦工。先来看一个例子：上面代码的返回结果如下：可以看到SVG图像中包含一条曲线和俩条直线，并且第二条直线是立刻第一条直线一段距离的。所有的这些绘制工作都是在元素中通过d属性来完成的。属性包含了一些用于绘制的命令。在上面的例子中，M命令代表“Move to”(移动到)的意...
我们可以使用SVG 的<text>元素来在SVG图像上绘制文字。下面是一个简单的例子：<svg xmlns="http://www.w3.org/2000/svg"><text x="20" y="40">这里是SVG文字</text> </svg>这个例子中定义一个位于x=20，y=40位置的文本。文字显示为“这里是SVG文字”。下面是它的返回结果：这里是SVG文字 文字的定义在深入了解SVG文字之前，先来看看下面的三个定义：Glyphs：Glyphs是字母或符号的视觉表现。例如，因为字母“a”有多种不同的视觉表现...
SVG 元素用于将一串文本放置到一条指定的路径上。例如可以将文本串放置到一个圆上，做出非常酷的效果。对于不同的浏览器，路径文字的效果也略有不同。下面是一个简单的路径文字的例子：<svg xmlns="http://www.w3.org/2000/svg"><defs><path id="myTextPath"d="M75,20a1,1 0 0,0 100,0"/></defs><text x="10" y="100" style="stroke: #000000;"><textPath xlink:href="#myTextPath" >Text along a curved path...</textPath></text...
上一篇文章中我们介绍了如何绘制SVG文本，那么如何绘制多行文本呢？SVG 的<tspan>元素用于绘制SVG多行文本。我们不必每行文本都使用绝对定位来排列制作多行文本，使用<tspan>元素可以非常方便的使一行文本相对于另一行文本来定位。使用<tspan>元素还可以使用户在同一时间里选择和复制多行文字。 tspan示例<svg xmlns="http://www.w3.org/2000/svg"><text x="20" y="10"><tspan>tspan line 1</tspan><tspan>tspan line 2</tspan></t...
绘制文本 在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下： 属性或方法基本描述font设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体fillStyle用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制...
一、坐标系 其实只要玩过一点点图形编程的人都知道，电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图声明：为本文为原创文章，作者保留所有权利！欢迎转载，转载请注明作者左洸和出处博客园二、Stroke 和 Fill HTML5中将图形分为两大类： 第一类称作 Stroke，我的理解就是轮廓、勾勒或者线条，总之，图形是由线条组成的； 第二类称作 Fill，就是填...