紋理映射到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>