Question

什么是最好的实践，当我需要SVG图像与SVG悬停与后备？

我的意思是带有PNG后退的SVG图像（正常，重现2x，3x），并在悬停到其他带有PNG后退的SVG图像时更改它们？

使用<img />或<picture> + <source /> + <img />标记与jQuery （或vanilla，但我已经使用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徘徊与后备

1 个答案: