[英]Using WebP as a background image in SVG
所以我想对我在 HTML 中做的事情做同样或类似的事情:
<picture>
<source type="image/webp" srcset="my-image.webp">
<img src="my-image.jpg">
</picture>
但是,显然这行不通:
<svg>
<picture>
<source type="image/webp" srcset="my-image.webp">
<img src="my-image.jpg">
</picture>
</svg>
我可以使用 .htaccess 方法,但我不想因为 302 HTTP 重定向而使用。
该解决方案还需要在没有任何 JavaScript 技巧的情况下工作......
这就是我最终做的,感谢 Robert Longson 的意见:
<foreignObject x="0" y="0" width="100%" height="100%">
<picture>
<source width="1180" height="500" type="image/webp" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=webp&text=webp@1x&texture=graphpaper&delay=2g 1x,
http://satyr.io/2360x1000?type=webp&text=webp@2x&texture=graphpaper&delay=2g 2x"/>
<source width="1180" height="500" type="image/jpeg" class="lazyload" data-srcset="http://satyr.io/1180x500?2&type=jpg&text=jpg@1x&texture=graphpaper&delay=2g 1x,
http://satyr.io/2360x1000?type=jpeg&text=jpeg@2x&texture=graphpaper&delay=3g 2x"/>
<img width="1180" height="500" class="lazyload"
data-src="http://satyr.io/1180x500?2&type=jpeg&text=jpeg@1x&texture=graphpaper&delay=3g" alt=""/></picture>
</foreignObject>
<svg>
<image
href="hello-world.jpg"
x="20" y="20"
height="160" width="160"
/>
</svg>
mozilla 文档: https : //developer.mozilla.org/en-US/docs/Web/SVG/Element/image
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.