代码之家 › 专栏 › 技术社区 › 1.21 gigawatts

是否可以将高dpi图像(如2x、3x和4x)放入SVG图像模式?

svg css html

1.21 gigawatts · 技术社区 · 7 年前

有没有一种方法可以支持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>

1 回复 | 直到 7 年前

ccprog 7 年前

您可以使用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>

推荐文章