我有以下經典的SVG代碼：
<svg xmlns="http://www.w3. org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<image
xlink:href="foo.webp"。
height="100"。
width="100"
x="0"/span>
y="0"/span>
image-rendering="optimizeQuality"。
/>
</svg>
然而，在某些瀏覽器上，webp還不被支持（iOS和macOS我在看著你。https://caniuse.com/?search=webp) ...
那么，是否有一種類似于<picture>元素的方法來做這樣的事情（語法顯然是錯誤的，但我希望它能表達這個意思）：
<svg xmlns="http://www.w3. org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<image
xlink:href="foo.webp"。
height="100"。
width="100"
x="0"/span>
y="0"/span>
image-rendering="optimizeQuality"。
/>
<fallback_to>
<image
xlink:href="foo.jpg"。
height="100"。
width="100"
x="0"/span>
y="0"/span>
image-rendering="optimizeQuality"。
/>
</svg>
......當然不會出現雙重http命中的問題。而且沒有使用客戶端的Javascript（modernizr或其他），
。多謝！
uj5u.com熱心網友回復：
也許你可以使用<foreignObject>。在這個元素里面，你可以指定你需要的HTML，比如說<picture>元素。
< svg viewBox="0 0 200 200"/span> xmlns="http: //www. w3.org/2000/svg" width="400" >
< foreignObject x="0"/span> y="0" width="300"/span> height="200"/span>>
<picture xmlns="http://www.w3.org/1999/xhtml"/span>>
<source srcset="https://upload.wikimedia. org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp" type="image/webp">。
<img src="https://upload.wikimedia. org/wikipedia/commons/thumb/a/a1/Johnrogershousemay2020.webp/200px-Johnrogershousemay2020.webp.png" alt="logo">。
</picture>/span>
</foreignObject>/span>
</svg>/span>uj5u.com熱心網友回復：
你可以檢測WebP支持并根據結果隱藏相關的<image>元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/320106.html
標籤：
下一篇：將svgs定位到一個盒子里