Question

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

样本图像很小（故意），表明它确实拉伸了图像。

我想要实现的是这样的事情请参阅链接＆gt;＆gt;“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我的目标是否可行？请帮忙。

Answer 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>

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

1 个答案: