问题
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>I want to avoid JavaScript and either set SVG attributes if available or set CSS.
Is there is anything like:
<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:
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>
来源：https://stackoverflow.com/questions/54063465/is-it-possible-to-put-hi-dpi-images-like-2x-3x-and-4x-in-a-svg-image-pattern