HTML5——SVG基础入门，全端web开发

这篇文章距离上次修改已过196天，其中的内容可能已经有所变动。

SVG 是一种用于描述二维图形的语言，它是基于 XML 的，并且在 HTML5 中被全面支持。

SVG 的全称是 Scalable Vector Graphics，也就是可缩放的矢量图形。使用 SVG 创建的图形内容可以无限制地进行缩放，而不会影响图像质量。

在 HTML5 中，我们可以通过以下几种方式来嵌入 SVG：

直接在 HTML 文件中嵌入 SVG 代码。
使用 SVG 的 <img> 标签。
使用 CSS 背景图像。
使用 <object> 标签。
使用 <iframe> 标签。
使用 JavaScript。

下面我将给出每种方法的示例代码：

直接在 HTML 文件中嵌入 SVG 代码：




<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
 
</body>
</html>

使用 SVG 的 <img> 标签：




<!DOCTYPE html>
<html>
<body>
 
<img src="image.svg" width="100" height="100" />
 
</body>
</html>

使用 CSS 背景图像：




<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 100px;
        height: 100px;
        background-image: url(image.svg);
        background-size: cover;
    }
</style>
</head>
<body>
 
<div></div>
 
</body>
</html>

使用 <object> 标签：




<!DOCTYPE html>
<html>
<body>
 
<object data="image.svg" width="100" height="100" type="image/svg+xml">
</object>
 
</body>
</html>

使用 <iframe> 标签：




<!DOCTYPE html>
<html>
<body>
 
<iframe src="image.svg" width="100" height="100">
</iframe>
 
</body>
</html>

使用 JavaScript：




<!DOCTYPE html>
<html>
<body>
 
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
 
<script>
    var svg = document.getElementById('mySVG');
    document.body.appendChild(svg);
</script>
 
</body>
</html>

以上就是 HTML5 中嵌入 SVG 的几种方法，你可以根据实际需求选择合适的方式。

HTML5——SVG基础入门，全端web开发

评论已关闭

推荐阅读