SVG代表可缩放矢量图形,它是一种用XML描述2D图形和图形应用程序的语言,然后由SVG查看器呈现XML。
SVG对于矢量类型图(例如饼图,X,Y坐标系中的二维图等)最有用。
要在HTML5中使用可缩放矢量图形(SVG),请直接使用<svg> ... </ svg>标记通过以下语法嵌入SVG-
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
要在HTML5 SVG中绘制形状,请使用
<circle>元素画一个圆。
<rect>元素绘制一个矩形。
<line>元素画一条线。
<ellipse>元素进行绘制和椭圆化。
<polygon>元素可绘制多边形。
您还可以使用<img>,<iframe>,<object>或<embed>标签将SVG添加到网页。让我们看看如何使用<svg>标签添加HTML5 SVG。
您可以尝试运行以下代码,以了解如何在HTML5中使用SVG。我们将在这里画一个圆
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG Circle</title> </head> <body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="greencircle" cx="60" cy="60" r="50" fill="green" /> </svg> </body> </html>