SVG 悬停与后备

Question

当我需要带有 SVG 悬停和回退的 SVG 图像时，最佳做法是什么？

我的意思是带有 PNG 回退的 SVG 图像（正常、响应式 2x、3x），并在悬停时将它们更改为其他带有 PNG 回退的 SVG 图像？

使用 <img /> 或 <picture> + <source /> + <img /> 标签和 jQuery （或原版，但是我已经使用了 jQuery)，或者将其全部放在 CSS 中作为背景？如果jQuery，是否意味着交换srcsets？如果 CSS，我如何最好地包含 @2x 和 @3x 图像版本？

此外，使用的方法如何影响悬停的预加载？不眨眼肯定会好很多

到目前为止我已经有了这个，我需要在悬停时将它们更改为 1hov.svg、1hov.png、1hov@2x.png、1hov@3x.png

<a href="#">
 <picture>
  <source type="image/svg+xml" srcset="logos/1.svg">
  <img src="logos/1.png" srcset="logos/1@2x.png 2x, logos/1@3x.png 3x" alt="logo">
 </picture>
</a>

Answer 1

这是我找到的 HTML + jQuery 解决方案。它将 src 和 sourcesets 交换为它们的悬停选项。包括悬停预加载。

HTML

        <a href="#" target="_blank">
            <picture>
                <source type="image/svg+xml" srcset="logos/1.svg" data-swap-srcset="logos/1hov.svg">
                <img src="logos/1.png"  data-swap-src="logos/1hov.png"
srcset="logos/1@2x.png 2x, logos/1@3x.png 3x" data-swap-srcset="logos/1hov@2x.png 2x, logos/1hov@3x.png 3x" alt="logo">
            </picture>
        </a>

jQuery

//preload hovers
$("source[data-swap-src]").each(function(){
    $('<img/>')[0].src = $(this).attr("data-swap-src");
});
$("img[data-swap-src]").each(function(){
    $('<img/>')[0].src = $(this).attr("data-swap-src");
    $('<img/>')[0].srcset = $(this).attr("data-swap-srcset");
});

$("a").hover(function(){
   var newone = $(this).find("img").attr("data-swap-src");
   $(this).find("img").attr("data-swap-src", $(this).find("img").attr("src"));
   $(this).find("img").attr("src", newone);
   newone = $(this).find("img").attr("data-swap-srcset");
   $(this).find("img").attr("data-swap-srcset", $(this).find("img").attr("srcset"));
   $(this).find("img").attr("srcset", newone);
   newone = $(this).find("source").attr("data-swap-srcset");
   $(this).find("source").attr("data-swap-srcset", $(this).find("source").attr("srcset"));
   $(this).find("source").attr("srcset", newone);
 }
);

SVG 悬停与后备

SVG hovers with fallbacks

fallback

svg

png

hover