Мобильная версия(Я знаю, что это немного глупо, но я пытаюсь сделать что-то, что будет работать в mediawiki и не поддерживает встроенный SVG...)
У меня все работает, кроме правильной высоты div (длины строки). Поскольку линия может иметь произвольную начальную и конечную точку и, следовательно, произвольный угол, я пытаюсь вычислить необходимую длину в CSS с помощью Пифагора.
У меня есть координаты начала и конца. конец строки как переменные CSS (начальная точка: --x1/-z1, конечная точка: --x2/-z2), поэтому я могу вычислить расстояние по горизонтали и расстояние по вертикали и, следовательно, две стороны прямоугольного треугольника . Гипотенузой этого прямоугольного треугольника будет линия, которую я хочу нарисовать (вид), и поэтому она будет иметь нужную мне длину.
Сейчас я пытаюсь вычислить эту длину в CSS следующим образом:
Код: Выделить всё
height: calc(1px * sqrt(calc(pow(calc(var(--x2) - var(--x1)), 2) + pow(calc(var(--z2) - var(--z1)), 2))));
--x1: 20; --z1: 20; --x2: 35; --z2: 50;
Это должно возвращать значение высоты около 33 пикселей, но это не так. Он просто устанавливает высоту в 0 пикселей.
Я дважды и трижды проверил формулу и даже поместил ее в некоторые онлайн-валидаторы CSS, и все они говорят мне, что это совершенно правильная формула CSS и она должна работать. Инспектор Firefox также не указывает на какие-либо ошибки или проблемы с этой формулой, просто при вычислении он каким-то образом получает результат 0.
К вашему сведению: я знаю, что, вероятно, есть один или там две ненужные функции Calc(). Я добавил их, когда они не работали, и пытался выяснить, почему они не работают. На самом деле мне не нужны Calc() внутри pow() или внутри sqrt(), но я хотел убедиться, что это не вызывает проблем.
На этом этапе Я не понимаю, почему это не работает должным образом.
Кто-нибудь знает, в чем может быть проблема?
Подробнее здесь: https://stackoverflow.com/questions/781 ... eturning-0
