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