纹理映射到SVG的路径

Question

我有一个普通的矩形位图，我希望能够用来填充一个四点SVG路径 - 基本上是一个映射的纹理，使位图的四个角落映射到四相应地，路径的点和图像的其余部分被“扭曲”。

我已经能够填补SVG矩形具有相同的图像，然后变换RECT使得位图转换它：

<defs> 
    <pattern id="bmp" x="0" y="0" width="1" height="1"> 
    <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/> 
    </pattern> 
</defs> 
<rect x="0" y="0" width="100" height="100" fill="url(#bmp)" stroke="black" transform="skewX(10)"/> 

当我尝试使用位图虽然填充路径它被映射到路径形状的边框，而不是路径本身的四点：

<defs> 
    <pattern id="bmp" x="0" y="0" width="1" height="1"> 
    <image x="0" y="0" width="100" height="100" href="mybmp.bmp"/> 
    </pattern> 
</defs> 
<path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" /> 

是否有可能获得与第一个例子相同的效果（纹理正确映射到的各个角落矩形）以任意的路径形状？

Answer 1

一个解决方案是给你的模式viewBox，以便其内容图像得到缩放以适应模式边界。

<svg> 
 
    <defs> 
 
    <pattern id="bmp" x="0" y="0" width="1" height="1" 
 
      viewBox="0 0 100 100"> 
 
     <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/> 
 
    </pattern> 
 
    </defs> 
 
    <path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" /> 
 
</svg>

根据您的路径的形状，您可能还需要设置preserveAspectRatio="xMidYMid slice"。这将确保将图案缩放到足够大以覆盖整个路径而没有间隙。

<svg> 
 
    <defs> 
 
    <pattern id="bmp" x="0" y="0" width="1" height="1" 
 
      viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"> 
 
     <image x="0" y="0" width="100" height="100" xlink:href="http://www.placekitten.com/100/100"/> 
 
    </pattern> 
 
    </defs> 
 
    <path d="M 0 0 L 100 0 L 120 80 L 50 120 Z" fill="url(#bmp)" stroke="black" /> 
 
</svg>