Рассчитайте Y1 второй строки, которая равна половине размера первой строки

Question

У меня есть строка с этими значениями (x1, y1, x2, y2):

20, 100, 120, 120

Как мне получить вторые строки Y1, чтобы они находились на той же высоте, что и первые строки Y1 (вторая строка имеет половину размера или отличается от строки 1)?

70, 100, 120, 120

Вторая строка выглядит с указанными выше значениями так:

Такжевывод должен выглядеть следующим образом:

Answer 1

Формула Подход:

console.log(getCoordinates(20,10,120,50,1/4));
console.log(getCoordinates(60,10,160,50,1/2));
console.log(getCoordinates(100,10,200,50,3/4));

//factor = 1/2 if 50%
//factor = 3/4 if 75% and so on
function getCoordinates(x1, y1, x2, y2, factor){
let x3 = 0,
    y3 = 0;

x3 = (x2-x1)*factor+x1;
y3 = (y2-y1)*factor+y1;

return {x3:x3, y3:y3}
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="10" x2="120" y2="50" stroke="red" />
<line x1="45" y1="20" x2="120" y2="50" stroke="green" />

<line x1="60" y1="10" x2="160" y2="50" stroke="blue" />
<line x1="110" y1="30" x2="160" y2="50" stroke="orange" />

<line x1="100" y1="10" x2="200" y2="50" stroke="black" />
<line x1="175" y1="40" x2="200" y2="50" stroke="yellow" />


<line x1="20" y1="100" x2="120" y2="120" stroke="red" />
<line x1="45" y1="105" x2="120" y2="120" stroke="green" />

<line x1="60" y1="100" x2="160" y2="120" stroke="blue" />
<line x1="110" y1="110" x2="160" y2="120" stroke="orange" />

<line x1="100" y1="100" x2="200" y2="120" stroke="black" />
<line x1="175" y1="115" x2="200" y2="120" stroke="yellow" />

</svg>

Второй подход:

Вы можете рассмотреть возможность использования градиента для получения вывода, который выглядит так, как вы хотите.

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

<line x1="15" y1="5" x2="120" y2="120" stroke="url(#myGradient25)" />

<line x1="25" y1="5" x2="130" y2="120" stroke="url(#myGradient75)" />

<line x1="35" y1="5" x2="140" y2="120" stroke="url(#myGradient50)" />

 
  
  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient25">
      <stop offset="25%"   stop-color="red" />
      <stop offset="25%" stop-color="green" />
    </linearGradient>
  </defs>

  <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient75">
      <stop offset="75%"   stop-color="red" />
      <stop offset="75%" stop-color="green" />
    </linearGradient>
  </defs>
  
   <!-- Stroke a circle with a gradient -->
  <defs>
    <linearGradient id="myGradient50">
      <stop offset="50%"   stop-color="red" />
      <stop offset="50%" stop-color="green" />
    </linearGradient>
  </defs>
</svg>