如何使SVG回退到简单的文本

时间:2014-10-06 14:11:16

标签: svg

我想在HTML中内联SVG代码并使用简单的文本(如“alt”)作为不支持浏览器的后备。希望文本可以用CSS格式化。

2 个答案:

答案 0 :(得分:0)

您可以使用modernizr根据是否支持svg来切换某些文字的显示:

<style>
  /* if svg is supported - hide the fallback */
  .svg .fallback { 
    display: none;
  }
</style>

<svg> ... </svg>
<div class="fallback"></div>

请参阅jsfiddle

答案 1 :(得分:0)

您可以使用foreignObject元素显示后备文本。

如果浏览器支持SVG,则包含后备内容的foreignObject元素将被display属性隐藏 如果浏览器不支持SVG,SVG定义的元素不起作用,因此将显示fallback div元素。

<html>
    <head>
    <style>
        div.fallback{color:red;}
    </style>
    </head>
    <body>
        <svg>
            <circle cx="50" cy="50" r="50" fill="red"/>
            <foreignObject display="none">
                <div class="fallback">This browser does not support inline SVG.</div>
            <foreignObject>
        </svg>
    </body>
</html>