0

我是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>

这是代码的示例运行：http: //jsfiddle.net/dLsduaq2/

示例图像很小（故意）以表明它确实拉伸了图像。

我想要实现的是这样的，请参阅链接>>“jonom.github.io/jquery-focuspoint/demos/grid/dolphin.html”单独使用svg或其他补充代码。

我不能使用 jquery 焦点，因为它是这样使用的：

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

因为我需要在 svg 标签下工作。

svg 可以实现我的目标吗？请帮忙。

4

1 回答 1

1

您将图案大小设置为包含元素的 100%，然后将图像大小设置为 100 像素。将您的图案设置为 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>
于 2014-11-06T16:34:00.923 回答