Я хочу подключить две точки SVG (например, центры из двух окружностей), используя дуги. Если есть только одно соединение, линия (<path>
) будет прямой. Если есть два соединения, оба будут округлены и будут симметричными, таким образом:
Итак, на самом деле существует несколько правил:
- Все должно быть симметричным для воображаемой линии, соединяющей две точки.
-
Из 1 видно, что если количество соединений:
- нечетный: мы не показываем прямую линию
- even: мы показываем прямую линию
-
Должно быть значение
k
, которое определяет расстояние между двумя соединениями между одними и теми же точками. -
Тангенс, проходящий через середину эллиптической дуги, должен быть параллелен прямой линии, соединяющей две точки. И, очевидно, середина линии будет перпендикулярна касательной.
Я пытаюсь получить формулу для вычисления параметров A
в элементе <path>
.
То, что я делал до сих пор:
<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent"/>
-
M100 100
ясно: что отправная точка (переход на 100 100) - Последние два числа также ясны. Путь заканчивается на
300,100
- Я также заметил, что если я поставлю
0
вместо20
, я получаю прямую линию. - Если я заменил
1,0
на1,1
, путь будет перевернут.
Я не знаю, как вычислить параметры A. Я читал документы, но мне все еще не ясно. Как рассчитать эти значения?
svg {
width: 100%;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<?xml version="1.0" standalone="no" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- Connect A(100,100) with B(300, 100) -->
<path d="M100 100, A50,0 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 0 1,1 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,30 0 1,0 300,100" stroke="black" fill="transparent" />
<path d="M100 100, A50,30 0 1,1 300,100" stroke="black" fill="transparent" />
<!-- A(100, 100) B(300, 400) -->
<path d="M100 100, A50,0 57 1,0 300,400" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 57 1,0 300,400" stroke="black" fill="transparent" />
<path d="M100 100, A50,20 57 1,1 300,400" stroke="black" fill="transparent" />
</svg>
</body>
</html>