WordPress中的内联SVG回退

Inline SVG fallback in WordPress

本文关键字：SVG 回退 WordPress      更新时间：2023-09-26

我正在构建一个带有选项面板的WordPress主题。在选项面板中，管理员可以上传一个图标，该图标将显示在页脚中。

上传图标时，管理员会将 SVG 和 PNG 版本上传到媒体上传器（例如图标.svg和图标.png）。

我在前端显示此图标，如下所示：

<nav>
<?php if( have_rows('footer_icons', 'option') ): ?>
    <ul>
    <?php while( have_rows('footer_icons', 'option') ): the_row();
        // Vars
        $icon = get_sub_field('icon');
    ?>
        <li>
            <img src="<?php echo esc_url($icon); ?>" alt="icon" width="60" height="60">
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>
</nav>

如果浏览器不支持 SVG，有没有办法检测和显示内联 png 回退（图标.png）？我知道 Modernizr 提供 SVG 检测，但我看不出它会提供这种级别的支持。

我会质疑它是否有必要。全球浏览器对 img 标签中使用 SVG 的支持率超过 96%。来源： http://caniuse.com/#feat=svg-img

如果绝对必要，请将 PNG URL 作为数据属性添加到 img 标记中，并将源设置为 SVG 文件。加载 Modernizr 并使用其功能检测将图像的源替换为 PNG URL（如果不支持 SVG 图像）。

示例标记（假设已设置$png_icon）：

<img src="<?php echo esc_url( $icon ); ?>" data-png-src="<?php echo esc_url( $png_icon ); ?>" alt="icon" width="60" height="60">

延伸阅读：

https://modernizr.com/docs

http://callmenick.com/post/svg-fallback-with-png（示例 #4）

由于您确实在 <img> 标签中显示 svg，而不是像问题标题建议的那样内联，最简单的方法是使用 onerror 事件处理程序： 

<img src="https://dl.dropboxusercontent.com/s/b7qcju9ubmdtigj/ball.svg" 
	onerror="this.src='https://dl.dropboxusercontent.com/s/gd7vo53yfrmaqx4/ball.png'"/>

相关文章：