Получение большого изображения для создания SVG

Question

Итак, у меня есть 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 увеличено или что-то, но я не могу понять, как это исправить.

Answer 1

Вы используете patternContentUnits="objectBoundingBox", когда из размеров значений содержимого я уверен, что вам нужно patternContentUnits="userSpaceOnUse" Это изменение исправляет это для меня.

Редактировать: работа jsFiddle