是否可以将 Hi DPI 图像（如 2x、3x 和 4x）放入 SVG 图像模式中？答案

【问题标题】：Is it possible to put Hi DPI images like 2x, 3x and 4x in a SVG image pattern?是否可以将 Hi DPI 图像（如 2x、3x 和 4x）放入 SVG 图像模式中？
【发布时间】：2019-01-07 00:54:41
【问题描述】：

有没有办法支持 SVG 模式中的 2x、3x 和 4x 图像？

* {
	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。

有没有类似的：

<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>

【问题讨论】：

标签： html css svg

【解决方案1】：

您可以使用 HTML <img> 标签包裹在 <foreignObject> 标签中：

<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>

【讨论】：