用完整的背景图片填充svg路径 [英] Fill a svg path with a full background-image

问题描述

我有下一个svg：

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="483px" height="255px">
   <path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
</svg>

https://i.stack.imgur.com/1pdB7.png

如何插入全背景图像，具有位置中心和不重复属性？像本例一样：

How can I insert a full-background image, with a position center and no-repeat attributes? Like in this example :

https： //i.stack.imgur.com/tUqbr.png

我真的很感谢您的回答，
谢谢！

I really apreciate your answers, Thank you!

推荐答案

您可以使用以下路径作为剪切路径：

You can use the path as a clipping path like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="483px" height="255px">
 <defs>   
  <clipPath id="theClippingPath" > 
  <path 
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
 </clipPath> 
  </defs> 
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="485" width="485" clip-path="url(#theClippingPath)"></image>
</svg>

这篇关于用完整的背景图片填充svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！