SVG

SVG或可缩放矢量图形是用于在网页中定义基于矢量的图形的Web标准。基于XML,SVG标准提供标记来描述视口中的路径,形状和文本。标记可以直接嵌入到HTML中以供显示,也可以保存到.svg文件中,并像任何其他图像一样插入。您可以手动编写SVG,但可以在矢量图形编辑器(如Illustrator或InkScape)中设计更复杂的图形,并将其导出为SVG文件或代码。

SVG基础知识

开发人员使用<svg>标记和XML命名空间启动SVG图形,如下所示:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
 </svg> 

该示例还包含version属性。 version属性是可选的,但建议使用带有XML规范的complaince。

此示例不会显示任何内容,它只是建立了一个视口。您可以添加heightwidth属性来设置视口的显示大小,这实际上建立了一个供您使用的画布。

使用视口,您可以添加基本图形,文本和路径元素。

<svg 
     version="1.1" 
     width="100%" 
     viewbox="0 0 600 300" 
     xmlns="http://www.w3.org/2000/svg"> 
  <rect x="10" y="10" width="100" height="100" fill="#f7b2c1" /> 
  <circle cx="240" cy="60" r="50" fill="#c1b2f7" stroke="#b2c1f7" stroke-width="15"/> 
  <text x="450" y="70" font-size="20" text-anchor="middle">SVG Text is browser readable!</text> 
  <g stroke="#b2c1f7"> <!-- g is for group --> 
    <path stroke-width="2" d="M10 170 l590 0" /> 
    <path stroke-width="4" d="M10 190 l590 0" /> 
    <path stroke-width="6" d="M10 210 l590 0" /> 
  </g> 
 </svg> 

您可以看到输出并使用此codepen中的代码。

在开始的svg标记中,我们添加一个width属性来将视口的宽度设置为容器宽度的100%,您可以使用百分比或像素宽度。开放的svg标签还有viewbox属性,该属性定义了一个窗口,通过该窗口可以看到svg的元素,在这种情况下,视图框的范围从(0,0)到(600,300)。在SVG空间中,X轴从左侧开始为零,向右增加; Y轴从顶部开始为零,向下增加。

第一个新标记是<rect />标记,它在SVG视口中定义了一个矩形。在这种情况下,我们定义一个从顶部和左侧10个单位和100个单位高和宽的正方形。 fill属性设置形状的填充颜色。

接下来,我们使用<circle />标签定义圆形或椭圆形。样本定义了一个以(240,60)为中心的圆,半径为50个单位。 strokestroke-width属性设置笔触颜色和笔划大小。

您可以使用text标记向图形添加文本。示例文本从文本的中间锚定到(450,70)处,并且字体大小为20个单位。 SVG中文本的优点在于它可以与您的图形的其余部分一起扩展,但它仍然可以被浏览器和Web机器人读取。

如果要将相同的属性或CSS样式应用于多个SVG元素,可以使用<g>标记对它们进行分组。分配给<g>标记的属性(如示例中的stroke属性)将应用于组中的所有元素。在这种情况下,有三个<path />元素。

<path />元素定义视口中的矢量路径。路径由d属性定义。在第一个例子中,定义读取'移动到绝对坐标(10,170) 绘制一条线到X方向的相对坐标590和Y方向的0。

以下命令可用于创建路径:

M =搬到 L =行到 H =水平线到 V =垂直线到 Z =关闭路径 C =(三次贝塞尔曲线)曲线 S =平滑曲线 Q =二次贝塞尔曲线到 T =平滑的二次贝塞尔曲线 A =弧

画布元素

画布图形可以绘制到

元件。你可以给suchan元素的宽度和高度属性来确定它的大小(以像素为单位)。一个新的画布是空的,这意味着它是完全透明的,并且简单地说就是文档中的空白空间。 该

标签旨在支持不同的绘图风格。要访问实际的绘图界面,我们首先需要创建一个上下文,这是一个对象,其方法提供绘图界面。目前有两种广泛支持的绘图样式:“2d”用于二维图形和通过OpenGL界面用于三维图形的“webgl”。

通过getContext方法创建上下文

元件。

<p > Before canvas . </p > 
 < canvas width ="120" height ="60" > </ canvas > 
 <p > After canvas . </p > 
 < script > 
 var canvas = document . querySelector (" canvas ") ; 
 var context = canvas . getContext ("2 d ") ; 
 context . fillStyle = " red "; 
 context . fillRect (10 , 10 , 100 , 50) ; 
 </ script > 

创建上下文对象后,该示例绘制一个红色矩形100 像素宽,50像素高,其左上角在坐标处 (10,10)。

绘制饼图

results变量包含一个表示对象的对象数组 调查回复。

var results = [ 
 { name : " Satisfied " , count : 1043 , color : " lightblue "} , 
 { name : " Neutral " , count : 563 , color : " lightgreen "} , 
 { name : " Unsatisfied " , count : 510 , color : " pink "} , 
 { name : " No comment " , count : 175 , color : " silver "} 
 ]; 

为了绘制饼图,我们绘制了许多饼图切片,每个切片由弧线和一对线条组成,位于该弧线的中心。我们可以通过将整圆(2π)除以响应的总数,然后将该数字(每个响应的角度)乘以选择给定选择的人数来计算每个弧所占用的角度。

< canvas width ="200" height ="200" > </ canvas > 
 < script > 
 var cx = document . querySelector (" canvas ") . getContext ("2 d ") ; 
 var total = results . reduce ( function ( sum , choice ) { 
 return sum + choice . count ; 
 } , 0) ; 
 
 // Start at the top 
 
 var currentAngle = -0.5 * Math . PI ; 
 results . forEach ( function ( result ) { 
 var sliceAngle = ( result . count / total ) * 2 * Math . PI ; 
 cx . beginPath () ; 
 // center =100 ,100 , radius =100 
 // from current angle , clockwise by slice ' s angle 
 cx . arc (100 , 100 , 100 , 
 currentAngle , currentAngle + sliceAngle ); 
 currentAngle += sliceAngle ; 
 cx . lineTo (100 , 100) ; 
 cx . fillStyle = result . color ; 
 cx . fill () ; 
 }) ; 
 </ script > 

这绘制了以下图表:

浏览器支持

所有现代浏览器都提供对SVG的浏览器支持 。 IE 9到IE 11中存在一些缩放问题,但是可以通过使用widthheightviewbox和CSS来克服它们。

编者

  • Vectr - 免费提供和创建和编辑SVG图形的网络和桌面工具

用于创建SVG的工具

可用于以绘图程序的形式创建SVG的工具很少。

  • Inkscape - 它是一个开源工具,用于使用易于使用的图形界面进行最先进的矢量绘图。
  • Adobe Illustrator - Adob​​e Illustrator是Vector Imagery的商业工具。

有关更多工具,请参阅支持SVG的W3C工具列表

为什么要使用SVG

作为矢量图像格式,它允许您调整图像大小而不会降低质量和特别轻的重量。 作为XML格式,它允许您从JavaScript的全部功能中受益,尤其是CSS。

资源


Contributing to the Guide

This open source guide is curated by thousands of contributors. You can help by researching, writing and updating these articles. It is an easy and fun way to get started with contributing to open source.