Как сохраняя пропорции заливки растягивать треугольник?

Question

[Илья]

Есть вот такой треугольник с фоном из картинки:

<svg version="1.1"  width="800px" height="250px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" preserveAspectRatio="none" >
  <pattern id="img_test" width="747" height="274" patternUnits="userSpaceOnUse">
    <image height="100%" xlink:href="https://image.ibb.co/mtOsjo/test_1.png" x="-86" />
  </pattern>
  <polygon fill="url(#img_test)" points="0,100 50,0 100,100"/>
</svg>

1)Как сделать что бы фон не искажался при изменении размеров SVG, а был как в оригинале?
2)Как выровнять фон по центру по X? (сейчас там стоит x="-86" подобранная на глаз и не до конца ровно)

Вообще задача состоит в том что бы сделать треугольник с фоном (по центру ширины и по всей выосте) из картинки, который можно было бы изменять по размером и при этом фон не искажался.

Answer 1

[Варлам Ерофеич]

<svg version="1.1"   viewBox="0 0 200 200" xml:space="preserve"  preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <svg id="trian" viewBox="0 0 200 200" >
    <pattern id="img_test" width="200" height="200"  patternUnits="userSpaceOnUse">
      <image x=-100 y=0 width="400"  xlink:href="https://image.ibb.co/mtOsjo/test_1.png" />
    </pattern>
    <polygon fill="url(#img_test)" points="0,200 100,0 200,200"/>
  </svg>
  
  <rect id="улёт" x="5"  y="180" width="40" height="20" fill="#c52" />
  <rect id="влёт" x="45" y="180" width="40" height="20" fill="#5c2" />
  <!--<use xlink:href="#trian" x="0" y="0" width="200" height="200"></use>-->
  <animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
          from="0 0 200 200" to="-500 -500 2000 2000" dur="0.8s"
          begin="улёт.click" fill="freeze" />
  <animate xlink:href="#trian" attributeType="XML" attributeName="viewBox"
          from="-500 -500 2000 2000" to="0 0 200 200" dur="0.8s"
          begin="влёт.click" fill="freeze" />
</svg>

Добавил кнопочки для анимации масштаба, чтобы легче было увидеть результат.
Попробовал в песочнице масштабировать, вроде всё ровно...
Если в image укажем width=, то -x картинки будет равен width паттерна/2, тогда центр картинки по горизонтали легче высчитать в style по calc=