獲取大圖像以圖案化SVG

因此，我嘗試創建一個SVG作爲屏幕上的一種角度條。但我希望它具有圖案背景。我在這裏有三個圖案背景，但只有很小的一個。是什麼賦予了？獲取大圖像以圖案化SVG

<svg class="bAngle1" width="100%" height="800"> 
     <defs> 
      <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse"> 
       <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> 
      </pattern> 
      <pattern id="beaconWords" x="0" y="0" width="1020" height="537" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox"> 
       <image preserveAspectRatio="none" width="1020" height="537" xlink:href="http://173.254.99.45/~b/words.png"></image> 
      </pattern> 
     </defs> 
     <polygon points="2600,0 2600,800 0,500 0,300" fill="url(#beaconWords)"/> 
    </svg>

在的jsfiddle：http://jsfiddle.net/2pwr8wo0/

這似乎是PNG是什麼的放大，但我無法弄清楚如何解決它。

來源

2014-09-18 DauntlessRob

當您從內容值的大小中使用patternContentUnits="objectBoundingBox"我確定您需要patternContentUnits="userSpaceOnUse"該更改可修復此問題。

編輯：工作jsFiddle

來源

2014-09-18 23:39:14

獲取大圖像以圖案化SVG

回答

相關問題