内联svg不在xhtml中显示

问题描述 投票:1回答:1

我创建了一个带内联SVG的XHTML文件。在测试为.XHTML时它不会显示,但在测试为HTML时会显示。我已经浏览了互联网,并相信我已经指定了正确的命名空间等,但是我很难过为什么它没有显示。请帮我理解我做错了什么。

注意:我也试过使用或不使用xlink,我看不到任何变化(但是我需要xlink,因为我需要safari支持)。

在此先感谢您的帮助!

示例:index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
		PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>
svg xhtml symbols xlink
1个回答
1
投票

在最底层的xmlns中使用<svg>属性,然后它就可以了。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
		PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="0">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

顺便说一下,由于XHTML中的<svg>仅在XHTML5之后定义,因此使用XHTML 1.0 doctype将无法验证(即使它将与正确的命名空间完美匹配)。解决方案是将doctype更改为XHTML5。

© www.soinside.com 2019 - 2024. All rights reserved.