Как рассчитываются пути и откуда начинается M 0,0 в контейнере?
Кажется, что путь не соответствует нормальным положительным отрицательным координатам x, y, как в математике:
(x вправо, -x влево, y вверх, -y вниз).
Я нашел что-то, что объясняло пути в SVG с помощью визуалов, но я не могу найти версию VML и похоже, это не тот же лог пути c. Я не могу найти ничего в Интернете, что делает это супер ясно. Следующее - лучшее, что я могу получить ...
m - moveto - Начать новый подпуть с заданной (x, y) координатой
l - lineto - Нарисуйте линию от текущей точки до заданной (x, y) координаты, которая становится новой текущей точкой. Для формирования ломаной линии можно указать несколько пар координат.
В строке атрибута пути определен замкнутый квадратный путь. Начальная точка определяется с помощью m (используется для команды moveto) в 1,1, а линия l рисуется с помощью l (буква «L» используется для командной строки в) из начальной позиции (1,1) в другие три баллы (по порядку): 1200; 200200; 200,1. Линия закрывается с помощью x (close) и заканчивается e (end). Обратите внимание, что координаты даны в относительном координатном пространстве и что реальный размер определяется шириной и высотой.
Я пытаюсь держаться подальше от изображений, когда мне нужны простые формы в электронных письмах, поэтому Я использую CSS, но для размещения Outlook я использую путь VML. Мне удалось найти путь треугольника, уже настроенный в нужном мне направлении в Интернете, с помощью Path, но теперь мне просто нужно повернуть его справа налево, и я не могу понять эти сумасшедшие координаты x, y / вычисления.
Ниже приведен код для прямоугольного треугольника (CSS и VML):
<table width="90%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="width:35%; background-color: #002c77; padding: 10px 20px; font-size: 26px; font-weight: bold; color: white;" width="35%" align="center">
Sign Up
</td>
<td style="background-color: #e6e6e6;" align="left">
<span style="height:100%; border-top: 38px solid transparent; border-bottom: 38px solid transparent; border-left: 15px solid #002c77; font-size:0px; mso-hide:all;"></span>
<!--[if mso]>
<v:shape path="M -300,1000 L 1000,500, -300,0 X E" style="width:15px;height:60px; position: relative;" filled="true" fillcolor="#002c77" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml"><o:lock selection="t"/></v:shape>
<![endif]-->
</td>
<td style="background-color: #e6e6e6; mso-padding-alt: 10px 20px 10px 40px; padding: 10px 20px;">
<strong>Sign Up</strong>
<br />
• Click the <em>Sign up</em> button
<br />
• Volunteer for up to 3 committees
</td>
</tr>
</tbody>
</table>
Прямой треугольник в фрагменте выглядит не так, как в электронной почте. Теперь я хочу сделать то же самое, но в отдельном ряду. Я избегаю треугольника Shape, потому что путь позволяет мне выйти из моего контейнера, например, чтобы немного его поднять, чтобы скрыть проблему Outlook с расстоянием в несколько пикселей между строками.
Ниже приведен пример, где я пытаюсь использовать это сейчас для нисходящего треугольника.
<table width="95%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="width:90px; background-color: #002c77; padding: 20px 0px; font-size: 24px; font-weight: bold; color: white;" width="90px" align="center">
More info
</td>
<td style="background-color: #e6e6e6; mso-padding-alt: 10px 20px 10px 40px; padding: 10px 20px;">
• Click the "Go To" link for more information about the requirement
<br />
• Click the "Take Action" link to enter missing data for the staff person
</td>
</tr>
<tr>
<td style="width:90px;" width="90px" align="center">
<span style="width:100%; border-top: 20px solid #002c77; border-right: 45px solid transparent; border-left: 45px solid transparent; border-bottom: 0; font-size:0; mso-hide:all; "></span>
<!--[if mso]>
<v:shape path="M ?,? L ?,?, ?,? X E" style="width:15px;height:60px; position: relative;" filled="true" fillcolor="#002c77" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml"><o:lock selection="t"/></v:shape>
<![endif]-->
</td>
<td>
</td>
</tr>
</tbody>
</table>
ОБНОВЛЕНИЕ: После долгих экспериментов кажется, что М 0,0 - верхний левый угол контейнера. Также кажется, что мне нужно добавить «L» для каждой точки линии, чтобы это работало правильно. Я думаю, мне повезло при первом запуске, так как последняя часть координаты была «0», поскольку это то, что, кажется, игнорируется, если вы не используете «L» между ними. Ниже приведен искомый путь, который теперь работает для электронной почты Outlook Desktop Client.
<table width="98%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="width:90px; background-color: #002c77; padding: 20px 0px; font-size: 24px; font-weight: bold; color: white;" width="90px" align="center">
More info
</td>
<td style="background-color: #e6e6e6; mso-padding-alt: 20px 15px 10px 15px; padding: 20px 15px; font-size: 16px;">
• Click the "Go To" link for more information about the requirement
<br />
• Click the "Take Action" link to enter missing data for the staff person
</td>
</tr>
<tr>
<td style="width:90px;" width="90px" align="center">
<span style="width:100%; border-top: 20px solid #002c77; border-right: 45px solid transparent; border-left: 45px solid transparent; border-bottom: 0; font-size:0; mso-hide:all; "></span>
<!--[if mso]>
<v:shape path="M 0,-50 L 500,750 L 1000,-50 X E" style="width:90px;height:20px; position: relative;" filled="true" fillcolor="#002c77" stroked="f" xmlns:v="urn:schemas-microsoft-com:vml"><o:lock selection="t"/></v:shape>
<![endif]-->
</td>
<td>
</td>
</tr>
</tbody>
</table>
ANSWER'I SH: Кажется, что только при эксперименте координата "M" начинается в самом верхнем левом углу и в каждой точке после должен начинаться с "L", а затем координаты. В этом случае ось X работает как математика с -x слева и x справа, но ось Y работает так, как у внизу, а -у вверх.
Кстати, я не делаю это официальным ответ, потому что я надеюсь, что кто-то предоставит нам хорошую ссылку на go, которая облегчит это понимание.