SVG在显示上的小bug

152.1

已于 2024-10-16 11:39:48 修改

阅读量562

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bug

于 2024-10-16 11:37:33 首次发布

本文链接：https://blog.csdn.net/Serasto/article/details/142977043

前端专栏收录该内容

3 篇文章

订阅专栏

在HTML 中引入SVG，但是在页面中竟然不显示SVG？？？

我的 HTML 和 SVG 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta >
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <img src="circle.svg" alt="SVG image" />
</body>
</html>

<svg version="1.1">
    <circle cx="90" cy="90" r="40" fill="red" stroke="black" stroke-width="2"/>
</svg>

我想要的结果是
能够正常显示的svg
但是我的得到的结果是：
不能正常显示的图片

解决方法：svg 文件中添加命名空间 xmlns、xmlns:xlink、xmlns:svg等比如：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="90" cy="90" r="40" fill="red" stroke="black" stroke-width="2"/>
</svg>