在本系列的较早文章中,我们提到了SVG与旧浏览器的陷阱,并使用Raphael.js将图形作为替代解决方案。 在这篇文章中,我们将进一步研究这个问题。
这个想法很简单,我们仍将使用SVG元素作为在网页上提供图形的主要方式,但是与此同时,我们还将提供一个后备功能, 以便仍可以在不受支持的浏览器中呈现该功能 。
当然,我们可以采取许多方法,但是我们只会研究两种我认为是更好的通用解决方案。 因此,让我们看看如何做到这一点。
使用对象元素
除了直接将其放入HTML文档之外,还有几种嵌入SVG的方法。 例如,如果将图形存储在.svg
文件中,则可以使用<object>
元素。
<object data='images/apple.svg'></object>
为了演示,我们在网页上添加了带有SVG的Apple徽标。 但是,不受支持的浏览器将保持空白。 为了解决这个问题,我们可以提供一个Bitmap图形 ,如下所示;
<object data='images/apple.svg'>
<img src='images/apple.png'/>
</object>
这样,受支持的浏览器仍将使用.svg
,而不受支持的浏览器将带有Bitmap图形 。 我们在Apple徽标下方添加了“ png”标记,以跟踪要交付的图形。
![](https://i-blog.csdnimg.cn/blog_migrate/67bea0393f4328609f849782e2dd88fc.png)
但是,正如我们在另一篇文章中提到的, 位图图形不像SVG那样灵活和可扩展 。 因此,让我们看一下另一种解决方案。
使用Modernizr
我们可以使用的另一种方法是使用Modernizr 。 对于那些不熟悉此JavaScript库的人来说,请放心,我们将专门介绍它。 现在,只需跟上我们。
首先,让我们准备一些必需JavaScript库, Modernizr.js和Raphael.js 。 然后,我们还需要使用此工具ReadySetRaphael.js将.svg
文件转换为Raphael支持的格式,并将输出保存在单独的.js
文件中; 让我们将其命名为svg.js
在HTML文档中包含Modernzr.js,如下所示:
<script type="text/javascript" src="scripts/modernizr.js"></script>
对于其他两个文件raphael.js
和svg.js
, 只有在不受支持的浏览器中查看它时 ,我们才会有条件地加载它。
使用Modernizr,我们可以检测浏览器的功能,在这种情况下,我们将检测浏览器是否能够呈现SVG,如果不能,我们将提供脚本:
if (!Modernizr.inlinesvg) {
document.write(
'<script type="text/javascript" src="scripts/raphael.js"><\/script>',
'<script type="text/javascript" src="scripts/svg.js"><\/script>'
);
}
现在,我们只需要添加HTML标记,如下所示;
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve">
<path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076
c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687
c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154
c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085
c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92
c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896
C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102
c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212
c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/>
</svg>
<div id="applelogo"></div>
在上面的代码片段中,我们将SVG直接添加到HTML文档中,并添加了一个div
来容纳Raphael代码。 为了再次注意到可以轻松交付的图形,我们还在SVG元素内的徽标下方添加了一些文本。
<text x="210" y="250">This is SVG</text>
因此,这就是我们将在浏览器中获得的东西。
![svg苹果](https://i-blog.csdnimg.cn/blog_migrate/59d1684e04018f6c238f382a0951da54.png)
![svg苹果](https://i-blog.csdnimg.cn/blog_migrate/59d1684e04018f6c238f382a0951da54.png)
为了更清楚地看到它,您可以从下面的链接查看演示,并确保在不同的浏览器中进行尝试。 我们建议使用IE8 / 7和Google Chrome 。
最终思想
好了,这些只是几个例子,在某些情况下,它们可能没有那么有效。 但总的来说,这些应该有助于解决在不受支持的浏览器中提供SVG的问题。 最后,如果您要添加一些我们在本文中错过的内容,请随时在下面的评论框中分享。
感谢您阅读这篇文章,我们希望您喜欢它。
更多
您可能还会在以下帖子中感兴趣:
翻译自: https://www.hongkiat.com/blog/scalable-vector-graphic-browsers/