当前位置：首页 > 行业动态 > 正文

html svg 如何用

admin
行业动态
2024-04-05
4227

HTML SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，可以在不损失质量的情况下进行缩放，SVG 文件可以包含文本、形状、路径、动画等元素，适用于创建复杂的网页图形和交互式设计，在 HTML 中使用 SVG，可以通过以下几种方式：

1、直接在 HTML 文件中插入 SVG 代码

最简单的方法是直接在 HTML 文件中插入 SVG 代码，将 SVG 代码放在 <svg> 标签内，然后在需要显示 SVG 的地方插入一个 <div> 或其他容器元素，设置其 CSS 类为 "inlinesvg"，接下来，创建一个 CSS 规则，将容器元素的 display 属性设置为 "inlineblock"，并将 overflow 属性设置为 "visible"，这样，SVG 就会以矢量形式显示在页面上。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>SVG in HTML</title>
    <style>
        .inlinesvg {
            display: inlineblock;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div >
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="black" strokewidth="3" fill="transparent" />
        </svg>
    </div>
</body>
</html>

2、使用外部 SVG 文件

另一种方法是将 SVG 代码保存在一个单独的文件中，然后在 HTML 文件中引用它，将 SVG 代码保存为一个名为 "example.svg" 的文件，在 HTML 文件中，使用 <img> 标签引用该文件，并设置其 src 属性为 "example.svg"，使用 CSS 调整图像的大小和位置。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>SVG from File</title>
    <style>
        img.svg {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img  src="example.svg" alt="Example SVG">
</body>
</html>

3、使用 <object> 标签嵌入外部 SVG 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>SVG from Object</title>
</head>
<body>
    <object data="example.svg" type="image/svg+xml"></object>
</body>
</html>

4、使用 JavaScript 操作 SVG

除了在 HTML 中直接插入或引用 SVG，还可以使用 JavaScript 对 SVG 进行操作，需要获取对 SVG 元素的引用，可以使用 document.querySelector() 或 document.getElementById() 方法来获取对特定元素的引用，可以使用 JavaScript API（如 getAttribute()、setAttribute()、appendChild()、removeChild() 等）对元素进行操作，可以更改元素的属性、添加或删除子元素等。

示例代码：

<button onclick="changeColor()">Change Color</button>
<svg id="mySvg" width="100" height="100">
    <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" strokewidth="3" fill="transparent" />
</svg>
<script>
    function changeColor() {
        var circle = document.getElementById("myCircle");
        circle.setAttribute("fill", "red");
    }
</script>

HTML SVG 提供了一种创建复杂图形和交互式设计的方法，可以直接在 HTML 文件中插入或引用 SVG，也可以使用 JavaScript API 对元素进行操作，通过掌握这些技术，您可以在网页上实现丰富的视觉效果和交互功能。