svg 填充图像质量。怎么修？

Question

我有一些图案，每个图案中都有一张图片。

我以前没有使用过 svgs，不知道要更改哪些属性才能获得清晰的结果。我一直在尝试 preserveAspectRatio、viewBox、patternUnits 的各种组合，但我似乎无法得到我想要的。

https://codepen.io/shkasjon/pen/WYwZmy 在这里你可以看到第二张svg图像显示清晰锐利，而第一张模糊不清。

如何修复第一张 svg 图片的质量？

    <svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
    <defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
    <defs><pattern id="image-as_profile_widget-2" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>    
    <rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
    </svg>

Answer 1

patternUnits="userSpaceOnUse" 添加到 <pattern >

<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" patternUnits="userSpaceOnUse" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>    
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>

svg 填充图像质量。怎么修？

svg fill image quality. How to fix?

svg

image

fill