内嵌svg不显示在xhtml中 [英] inline svg not displaying in xhtml
问题描述
我已经用内联SVG创建了一个XHTML文件.当测试为.XHTML时，它不会显示，但是当测试为HTML时，它会显示.我搜寻了互联网，并相信我指定了正确的名称空间，等等.但是，我为为什么它不显示而感到困惑.请帮助我了解我在做什么错.
I have created an XHTML file with inline SVG. It does not display when tested as .XHTML but it does when tested as HTML. I have scoured the internet and believe I have the proper namespaces, etc. specified however, I'm stumped as to why it's not displaying. Please help me understand what I'm doing wrong.
注意:我也尝试过使用xlink或不使用xlink，但没有发现任何变化(但是我需要xlink，因为我需要野生动物园支持).
Note: I have also tried with or without xlink and I see no change (however I require xlink as I need safari support).
提前感谢您的帮助！
示例:index.xhtml
Example: 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> home</a>
</div>
</body>
</html>
推荐答案
还要在最底端的<svg>中使用xmlns属性，然后它将起作用.
Use the xmlns attributes in the bottommost <svg> as well, then it'll work.
<?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> home</a>
</div>
</body>
</html>
顺便说一句，由于XHTML中的<svg>只是从XHTML5开始才定义的，因此使用XHTML 1.0 doctype将无法验证(即使它可以在适当的命名空间下完美运行).解决方案是将文档类型更改为XHTML5.
By the way, as <svg> in XHTML has only been defined since XHTML5, using an XHTML 1.0 doctype will not validate (even if it will run perfectly with the proper namespaces). The solution is to change the doctype to XHTML5.
这篇关于内嵌svg不显示在xhtml中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
