是否可以将高 DPI 图像(如 2x、3x 和 4x)放入 SVG 图像模式中? [英] Is it possible to put Hi DPI images like 2x, 3x and 4x in a SVG image pattern?
本文介绍了是否可以将高 DPI 图像(如 2x、3x 和 4x)放入 SVG 图像模式中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法支持 SVG 模式中的 2x、3x 和 4x 图像?
Is there a way to support 2x, 3x and 4x images in SVG pattern?
* {
margin: 0;
padding: 0;
}
#Avatar {
opacity: 1;
fill: url(#Avatar_A0);
}
.Avatar {
position: absolute;
overflow: visible;
width: 38px;
height: 38px;
left: 10px;
top: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Support HiDPI Images</title>
</head>
<svg class="Avatar">
<pattern id="Avatar_A0" x="0" y="0" width="100%" height="100%">
<image x="0" y="0" width="100%" height="100%" href="http://www.gravatar.com/avatar/?d=identicon" xlink:href="http://www.gravatar.com/avatar/?d=identicon"></image>
</pattern>
<rect id="Avatar" rx="19" ry="19" x="0" y="0" width="38" height="38">
</rect>
</svg>
</html>我想避免使用 JavaScript 并设置可用的 SVG 属性或设置 CSS.
I want to avoid JavaScript and either set SVG attributes if available or set CSS.
是否有类似的东西:
<pattern id="Avatar_A0" x="0" y="0" width="100%" height="100%">
<image href="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" x="0" y="0" width="100%" height="100%"></image>
</pattern>
推荐答案
您可以使用包裹在 标签:
You can use a HTML <img> tag wrapped in a <foreignObject> tag:
<pattern id="Avatar_A0" x="0" y="0" width="100%" height="100%">
<foreignObject width="100%" height="100%">
<img srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"
x="0" y="0" width="100%" height="100%"></image>
</foreignObject>
</pattern>
这篇关于是否可以将高 DPI 图像(如 2x、3x 和 4x)放入 SVG 图像模式中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
