9

请参阅下面的代码 - 我正在尝试在我的网站中包含内联 svg。我正在遵循一个简洁的建议来使用 svg 开关元素，以便它在旧浏览器上优雅地降级。这个想法是支持 svg 的浏览器使用 switch 块中的第一个元素；那些不忽略所有 svg 标签而只显示埋在 switch 块的第二个元素（即 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';
  }
}
</script>
<!-- the replacement img tag goes here -->
</foreignObject>
</switch>
</svg>

</body>
</html>
4

1 回答 1

5

这是针对 IE8 和更早版本以外的浏览器（需要基于 JS 的 shiv 来识别text元素）的一个仅 CSS 解决方案的想法，

<!DOCTYPE html>
<html>
  <head>
    <title>Test Case</title>

<!--[if lte IE 8]>
    <script type="text/javascript">
      document.createElement("text");
    </script>
<![endif]-->

    <style type="text/css">
      @namespace svg "http://www.w3.org/2000/svg";
      text { display: none; }
      svg|text { display: inline; }
    </style>
  </head>
  <body>

    <svg>
      <switch>
        <g>
          <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
          <text x="20" y="120">this gets rendered unless I deal with it</text>
        </g>
        <foreignObject>
          <p>Use an SVG capable browser</p>
        </foreignObject>
      </switch>
    </svg>

  </body>
</html>

这里的想法是支持 SVG 内联的浏览器通过将 SVG 元素放入“http://www.w3.org/2000/svg”命名空间来实现，然后可以在 css 中对其进行寻址。

在显示 SVG 的 Firefox 12、IE9、Chrome 18 Opera 11.6 以及显示回退的 Firefox 3.6 和 Safari 5.0 中进行了测试。

JSFiddle 在http://jsfiddle.net/rGjKs/

于 2012-05-06T11:15:28.900 回答