Question

我已经使用内联SVG创建了XHTML文件。测试为.XHTML时不显示，但测试为HTML时显示。我搜寻了互联网，并相信我指定了正确的名称空间，等等。但是，我为为什么它不显示而感到困惑。请帮助我了解我在做什么错。

注意：我也尝试过使用xlink，也可以不使用xlink，但没有发现任何变化（但是我需要xlink，因为我需要野生动物园支持）。

在此先感谢您的帮助！

示例：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>

Answer 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将无法验证（即使它可以在适当的名称空间下完美运行）。解决方案是将文档类型更改为XHTML5。

Answer 2

再次检查您使用的是.xhtml文件扩展名，然后确保您的svg具有以下内容：

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Source

内嵌svg不显示在xhtml中

2 个答案: