前端祖传三件套HTML的HTML5之内联SVG

HTML5 内联 SVG

在 HTML4 中，要在网页上显示矢量图形，必须使用 或 元素来引入外部 SVG 文件。而在 HTML5 中，可以直接将 SVG 代码嵌入到 HTML 文件中，并且可以使用 CSS 和 JavaScript 来操作 SVG 图像。

什么是 SVG？

SVG（可缩放矢量图形）是用于描述二维矢量图形的一种开放标准。使用 SVG，我们可以创建各种复杂的矢量图形、图表、地图等等，而且可以无限缩放而不失真。

SVG 是由 XML 描述语言表示的，因此具有 XML 的所有特性，如可编辑、可搜索、可压缩等等。

在 HTML 中内联 SVG

在 HTML 文件中，可以使用 元素来嵌入 SVG 代码。下面是一个简单的例子：

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Inline SVG Example/title>
    
    style>

        svg {
    
            width: 200px;
    
            height: 200px;
    
            background-color: #f1f1f1;

        }
    
    /style>
    
/head>
    
body>
    
    h1>
    Inline SVG Example/h1>
    
    svg viewBox="0 0 100 100">
    
      circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    
    /svg>
    
/body>
    
/html>
    

在这个例子中，我们创建了一个圆形 SVG 图像，并使用 CSS 来设置其宽度、高度和背景色。

在 CSS 中操作 SVG

由于 SVG 代码是 XML 格式的，因此可以使用 CSS 来对其进行样式控制。下面是一个简单的例子：

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Inline SVG Example/title>
    
    style>

        svg {
    
            width: 200px;
    
            height: 200px;
    
            background-color: #f1f1f1;

        }

        circle {
    
            stroke: black;
    
            stroke-width: 3;
    
            fill: red;

        }
    
    /style>
    
/head>
    
body>
    
    h1>
    Inline SVG Example/h1>
    
    svg viewBox="0 0 100 100">
    
      circle cx="50" cy="50" r="40" />
    
    /svg>
    
/body>
    
/html>
    

在这个例子中，我们使用 CSS 来设置圆形 SVG 图像的边框颜色、边框宽度和填充颜色。

在 JavaScript 中操作 SVG

SVG 也可以使用 JavaScript 来进行动态操作和交互。下面是一个简单的例子：

!DOCTYPE html>
    
html>
    
head>
    
    title>
    Inline SVG Example/title>
    
    style>

        svg {
    
            width: 200px;
    
            height: 200px;
    
            background-color: #f1f1f1;

        }

        circle {
    
            stroke: black;
    
            stroke-width: 3;
    
            fill: red;
    
            transition: all 0.5s ease;

        }

        circle:hover {
    
            fill: green;

        }
    
    /style>
    
/head>
    
body>
    
    h1>
    Inline SVG Example/h1>
    
    svg viewBox="0 0 100 100">
    
      circle cx="50" cy="50" r="40" />
    
    /svg>
    
    script>
    
        var circle = document.querySelector('circle');

        circle.addEventListener('click', function() {
    
            this.setAttribute('r', '60');

        }
    );
    
    /script>
    
/body>
    
/html>
    

在这个例子中，我们使用 JavaScript 来为圆形 SVG 图像添加了一个点击事件。当用户点击图像时，JS 将“半径”属性更改为 60。

总结

HTML5 提供了内联 SVG 的支持

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！