freeCodeCamp

7.3 KiB

Raw Blame History

title	localeTitle
SVG	SVG

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。

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

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

<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个单位。 stroke和stroke-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中存在一些缩放问题，但是可以通过使用width ， height ， viewbox和CSS来克服它们。

编者

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

用于创建SVG的工具

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

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

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

为什么要使用SVG

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

7.3 KiB Raw Blame History Unescape Escape

SVG