Edit Shape Paths в CSS

The Shape Path Editor - это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью clip-path, а также свойство CSS shape-outside (en-US) и <basic-shape> (en-US). В этом руководстве вы найдёте все доступные варианты.

Активация / деактивация Shape Path Editor

The Shape Path Editor доступен через панель правил CSS, которую можно открыть, как описано в руководстве Opening the Inspector. После того как вы выбрали свой элемент, вы увидите значок формы рядом с любым допустимым значением, например один для shape-outside.

Щелчок по иконке заставит Редактор выделить фигуру.

Чтобы отключить Shape Path Editor, щёлкните по иконке ещё раз или выберите другой элемент или другой редактор. Обратите внимание, что Shape Path Editor не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.

Понимание строк, нарисованных редактором

После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.

  • Сплошная линия показывает контур фигуры, которая обёртывает текст. Это ваша форма. Если форма обрезается по margin box, то margin box будет составлять часть этой строки.
  • Пунктирная линия демонстрирует контур формы, которая проходит мимо ссылки margin box; это область, которая будет обрезана по margin box. Чтобы понять margin box и другие поля, используемые формулой CSS, см. Shapes from box values.

Редактирование основных фигур

Параметры, предоставленные вам инструментом, будут различаться в зависимости от типа базовой формы, которую вы редактируете. Доступ к параметрам можно получить, активировав Shape Path Editor с помощью обычного щелчка по иконке, и вы можете использовать контекстное меню (Ctrl/Cmd + щелчок) для доступа к дополнительным функциям.

circle()

Если значение shape-outside равно circle(), значит вы создаёте circle basic shape. При нажатии на иконку формы рядом со значением circle() будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр. Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.

В панели правил вы можете увидеть значения для circle() при изменении формы. Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, изменённый путь формы.

ellipse()

Если значение shape-outside равно ellipse(), значит вы используете ellipse basic shape. Значение ellipse() работает так же, как circle() в Shape Path Editor. Эллипс представляет собой сжатый круг и, следовательно, имеет возможность изменять размер по горизонтали и вертикали, когда вы нажимаете на значок фигур.

inset()

Если значение shape-outside равно inset(), значит вы используете inset basic shape, которая позволяет создавать значения смещения, вытягивая содержимое из margin box.

Каждая сторона прямоугольника может быть нацелена после нажатия на значок формы, чтобы активировать Shape Path Editor, и перетаскивание каждой стороны будет обновлять значения для top, right, bottom, и left смещая значения.

polygon()

Если значение shape-outside равно polygon(), значит вы используете polygon basic shape. Это самый сложный из основных значений формы, поэтому инструмент даёт вам больше возможностей при их редактировании:

  • Нажатие на значок формы активирует Shapes Path Editor и даёт вам возможность перемещать любую из точек вашей фигуры многоугольника.
  • Дважды щёлкните в любом месте линии формы, и вы получите новую точку для настройки.
  • Дважды щёлкните по существующей точке, и она будет удалена. Помните, что многоугольник должен содержать не менее трёх точек.

Перемещение и масштабирование фигур

Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмёте Ctrl/Cmd + щелчок на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать её. Ещё раз, произойдёт отсечение, если вы превысите границы margin box.

Если ваша форма является многоугольником, вы также получаете возможность вращать её вокруг оси.

Поддержка браузера

The Shape Path Editor в настоящее время работает для форм, сгенерированных с помощью clip-path; он также будет работать для форм, созданных с помощью shape-outside (en-US) с Firefox 62.