时间戳

首页 > 解决方案 > SVG 不显示

html - SVG 不显示

问题描述

这是 HTML 代码：

<html>
<head>
    <title>HOME | index</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>                       
    <div style="text-align:center;padding:150px 0;">
        <object type="image/svg+xml" data="/img/menu.svg">
            <!-- <embed src="/img/menu.svg"> -->
        </object>
    </div>                
</body>

这是 SVG：

<svg version="1.1" id="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 228.4 18.2" style="enable-background:new 0 0 228.4 18.2;" xml:space="preserve" width="500px" height="500px">
    <style type="text/css">
        .st0{
            fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;
        }
    </style>
    <line id="XMLID_1_" class="st0" x1="5.8" y1="10" x2="221.8" y2="10"/>
</svg>

如果我使用embed src ，结果相同。SVG 只是一个笔划，不会出现在任何浏览器（firefox、chrome、edge）中。我是 SVG 图像的新手。

标签： htmlcssobjectsvgembed

解决方案

推荐阅读