【发布时间】：2012-05-15 05:10:39
【问题描述】：
请参阅下面的代码 - 我正在尝试在我的网站中包含内联 svg。我正在关注a neat suggestion 使用 svg 开关元素，以便它在旧浏览器上优雅地降级。这个想法是支持 svg 的浏览器使用 switch 块中的第一个元素；那些不忽略所有 svg 标签而只显示埋在 switch 块的第二个元素（即 foreignobject 标签）中的 img。
它工作得非常好......除了我的 svg（它是乐谱）必须包含文本元素并且它们被旧浏览器呈现（以及外来对象）。
具有讽刺意味的是，在 IE8 及更低版本中使用条件 cmets 很容易处理此问题。
对于其他较旧的浏览器，我在 foreignobject 中有一个 javascript 解决方法，它重新定义了 svg 文本的类。它有效......但感觉就像一个真正的黑客。
有没有更好的方法来做到这一点（更好的 javascript、css 解决方案、另一种处理 svg 文本的方法......）？
这里是代码的基本内容：
<html>
<head>
<!-- this deals with elements using the svgtext class in old IE browsers -->
<!--[if lte IE 8]>
<style type="text/css">
.svgtext { display: none; }
</style>
<![endif]-->
<style type="text/css">
.donotdisplay { display: none; }
</style>
</head>
<body>
<svg ...>
<switch>
<g>
<!-- the svg goes here -->
<text class="svgtext">this gets rendered unless I deal with it</text>
</g>
<foreignObject ...>
<script type="text/javascript">
window.onload=function(){
var inputs=document.getElementsByTagName('text');
for(i=0;i<inputs.length;i++){
inputs[i].className='donotdisplay';
}
}
</script>
<!-- the replacement img tag goes here -->
</foreignObject>
</switch>
</svg>
</body>
</html>
【问题讨论】：
-
我会看看 RaphaelJS，以防它提供特征检测 - 或者也许是 Modernizr。也没用过，但都值得一试。
-
除了不支持 SVG 的 IE8 之外，您还尝试支持哪些其他旧浏览器？
-
@halfer - Modernizr 将在整个文档中添加
svg或no-svg类，可以在代码中或使用 CSS 选择器进行检查。它不会自动解决问题，但很容易检查。 -
@TimMedora - 很酷，这样就可以了。有时间一定要试一试！
-
@TimMedora - 谢谢，Modernizr 听起来就像这份工作。
标签： javascript html svg