Jquery 如何使图像模式填充svg多边形的边界，但在调整大小时不会拉伸图像（质量）？

我是svg新手。我创建了一个多边形，并用一个图像填充到它的边界。但当窗口调整大小时，图像会不断拉伸。这是我的密码：

<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                    <pattern id="polygon_image_1" width="1" height="1"  patternUnits="objectBoundingBox">                
                         <image x="0" y="0" width="100" height="100"  preserveAspectRatio="none" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-ujgnduv6enQGA4LvB_UV_w3hDrZjWp20KeB-2B1dyEmToVMvSfvGWk"></image>
                    </pattern>                        
                </defs>      

                <polygon points="0,0, 100,0 100,15  50,55 0,15"  fill="url(#polygon_image_1)" <?php></polygon> 
</svg>

将图案大小设置为包含元素的100%，然后将图像大小设置为100 px。将图案设置为10%，图像大小设置为10px，你会得到更接近你想要的东西

<pattern id="polygon_image_1" width=".1" height=".1"  patternUnits="objectBoundingBox">              
    <image x="0" y="0" width="10" height="10"  preserveAspectRatio="none" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-ujgnduv6enQGA4LvB_UV_w3hDrZjWp20KeB-2B1dyEmToVMvSfvGWk"></image>
</pattern>

图像平铺和拉伸在您所指的示例中。如果不希望图像缩放，那么您可能只想将PreserveSpectRatio设置为“xMidYMid slice”之类的值。
<pattern id="polygon_image_1" width=".1" height=".1"  patternUnits="objectBoundingBox">              
    <image x="0" y="0" width="10" height="10"  preserveAspectRatio="none" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA-ujgnduv6enQGA4LvB_UV_w3hDrZjWp20KeB-2B1dyEmToVMvSfvGWk"></image>
</pattern>