问

如何以SVG形状拉伸图像以填充其边界？

携手相约幸福发布于 2023-02-09 14:18

svg

xml

http

int

我有一个SVG形状(平行四边形),充满了图像.这个演示可以在这里看到.

SVG对象是:






但是图像没有被拉伸到形状的边界,而是位于形状的中间.

我想要实现的是:



但我得到的是这样的: 



谁能建议我一个适用于所有形状的解决方案(即五边形,六边形,星形等)？顺便说一句,它已经可以用椭圆工作了.



        
        1 个回答
        
                        
                添加preserverAspectRatio=none到图像对象并将宽度/高度设置为100%似乎可以满足您的需求.更新了小提琴



<svg   >

    <defs>
        <pattern id="blip1" patternUnits="userSpaceOnUse"  >
             <image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/uTDpE6J.jpg"  ></image>
        </pattern>
    </defs>

    <polygon points="49,2 280,2 232,84 1,84" x="1" y="1" >
    </polygon>

</svg>


                
                    2023-02-09 14:19  回答
                       好人好报
                
            

                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签