请参阅下面的代码 - 我试图在我的网站中包含内联svg.我遵循一个巧妙的建议,使用svg开关元素,以便它在旧浏览器上优雅地降级.想法是支持svg的浏览器使用switch块中的第一个元素; 那些不会忽略所有svg标签的东西,只是显示埋在开关块的第二个元素(即foreignobject标签)中的img.
它工作得很好......除了我的svg(乐谱)必然包含文本元素,它们被旧版浏览器渲染(以及外部对象).
具有讽刺意味的是,使用条件注释很容易在IE8及以下版本中处理此问题.
对于其他较旧的浏览器,我在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';
} …