HTML5-SVG - DIVCSS5

SVG代表小号calable V厄克托ģ raphics并且它是用于描述在XML 2D图形和图形应用程序的语言和XML然后通过SVG观察者呈现。

SVG对于矢量类型图（例如饼图，X，Y坐标系中的二维图等）最有用。

SVG成为W3C建议书14。2003年1月，您可以在SVG Specification中查看SVG规范的最新版本。

查看SVG文件

大多数网络浏览器都可以显示SVG，就像显示PNG，GIF和JPG一样。Internet Explorer用户可能必须安装Adobe SVG Viewer才能在浏览器中查看SVG。

在HTML5中嵌入SVG

HTML5允许使用<svg> ... </ svg>标签直接嵌入SVG ，该标签具有以下简单语法-

...

</svg>

Firefox 3.7还引入了一个配置选项（“ about：config”），您可以使用以下步骤启用HTML5-

输入about：config中在Firefox地址栏中。

单击“我会小心，我保证！” 出现的警告消息上的按钮（并确保您遵守！）。

在页面顶部的过滤器栏中键入html5.enable。

当前将禁用它，因此单击它可将值切换为true。

现在，您的Firefox HTML5解析器应该已启用，并且您应该能够尝试以下示例。

HTML5-SVG圈

以下是SVG示例的HTML5版本，该示例将使用<circle>标签绘制一个圆圈-

现场演示

<!DOCTYPE html>

<html>

<head>

<style>

#svgelem {

position: relative;

left: 50%;

-webkit-transform: translateX(-20%);

-ms-transform: translateX(-20%);

transform: translateX(-20%);

}

</style>

</head>

<body>

<h2 align = "center">HTML5 SVG Circle</h2>

</svg>

</body>

</html>

这将在启用HTML5的最新版本Firefox中产生以下结果。

HTML5-SVG矩形

以下是SVG示例的HTML5版本，该示例将使用<rect>标签绘制一个矩形-

现场演示

<!DOCTYPE html>

<html>

<head>

<style>

#svgelem {

position: relative;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

</style>

</head>

<body>

<h2 align = "center">HTML5 SVG Rectangle</h2>

</svg>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h60445.shtml