📌  相关文章
📜  svg xmlns - Html (1)

📅  最后修改于: 2023-12-03 15:05:24.791000             🧑  作者: Mango

SVG命名空间和HTML

SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述矢量图形。HTML（Hypertext Markup Language）是一种用于创建和渲染Web页面的标记语言。在前端开发中，常常会用到SVG和HTML两种技术，这里我们将介绍SVG命名空间和HTML之间的关系。

SVG命名空间

SVG元素被定义在http://www.w3.org/2000/svg命名空间中。即，在SVG中定义的元素始终具有svg:前缀。例如，<svg>元素应写为<svg xmlns:svg="http://www.w3.org/2000/svg">，其中xmlns:svg属性指定SVG命名空间。

<svg xmlns:svg="http://www.w3.org/2000/svg">
    <svg:rect x="10" y="10" width="50" height="50" />
</svg>
HTML中使用SVG

HTML可以在文档中直接使用SVG元素，不需要指定命名空间。这是由于HTML直接包含了SVG的命名空间，因此HTML解析器可以正确地解析SVG标记。

<!DOCTYPE html>
<html>
    <head>
        <title>SVG in HTML</title>
    </head>
    <body>
        <svg width="100" height="100">
            <rect x="10" y="10" width="50" height="50" />
        </svg>
    </body>
</html>
SVG和HTML共存

SVG和HTML可以混合使用。在HTML中直接嵌入SVG元素，或者将SVG元素放入HTML的块级元素中。

<!DOCTYPE html>
<html>
    <head>
        <title>Mixed SVG and HTML</title>
    </head>
    <body>
        <h1>This is a HTML Heading</h1>
        <svg width="100" height="100">
            <rect x="10" y="10" width="50" height="50" />
        </svg>
        <p>This is a HTML paragraph.</p>
    </body>
</html>
总结

SVG和HTML可以一起使用，并且HTML可以在文档中直接使用SVG元素。需要注意的是，在SVG元素中使用时要指定命名空间，而在HTML中使用时则不需要。