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 和源集交换为悬停选项。包括悬停预加载。

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);
 }
);