Question

我有一些模式，每个模式中都有一个图像。

我以前没有使用过svgs，也不知道要更改哪些属性才能获得清晰的结果。我一直在尝试各种各样的saveAspectRatio，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填充图像质量。怎么修？

1 个答案: