Я хочу попробовать сделать 4 линии, которые противоположны друг другу, но длина не кажется одинаковой, а угол наклона также одинаков

Question

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

Я искал на сайтах различные генераторы svg, но, похоже, я не понимаю, как их использовать. и подумайте о ручных x1, y1 и x2, y2, но не ... результаты асимметричны (не говоря уже о том, что я плох в математике).

.chart {
  stroke: white;
  stroke-width: 2
}

.pop {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 50%;
  top: 47%;
  transform: translate( -50%, -50%)
}

svg {
  background-color: black;
}

<div class="pop">
  <svg class="chart" width="300" height="300">
    <line x1="110" y1="110" x2="70" y2="70"></line>
    <line x1="180" y1="180" x2="220" y2="220"></line>
    <line x1="220" y1="70" x2="175" y2="115"></line>
    <line x1="70" y1="220" x2="115" y2="175"></line>
    </svg>
</div>

Codepen: https://codepen.io/BunchOfPaper/pen/gNMEdQ

Answer 1

Вот значения разметки SVG с тем, чего вы пытаетесь достичь:

<div class="pop">
  <svg class="chart" width="300" height="300">
    <line x1="75" y1="75" x2="125" y2="125"></line>
    <line x1="225" y1="225" x2="175" y2="175"></line>
    <line x1="225" y1="75" x2="175" y2="125"></line>
    <line x1="75" y1="225" x2="125" y2="175"></line>
  </svg>
</div>

Идея - это первое x1, а y1 - это то место, где находится начальная точка линии, а x2 и y2 - это конечная точка. Вы не обязательно должны быть хороши в математике:)

Вот ручка: https://codepen.io/anon/pen/dBpWMb

Вот ручка с вашим пульсаром: https://codepen.io/anon/pen/vqXmKO