Question

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

Answer 1

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

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

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

请参阅jsfiddle。

Answer 2

您可以使用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>

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

2 个答案: