атрибут d в пути SVG

Печально известный атрибут d в элементе пути для SVG — это горстка. Или хотя бы сначала. Особенно для картографии.

Давайте посмотрим на атрибут объявления для функции geojson:

const feature  = { 
  "type": "Feature", 
  "geometry": { 
    "type": "Polygon", 
    "coordinates": [ [
    [ 13.31, 52.79 ], 
    [ 13.35, 52.79 ], 
    [ 13.35, 52.80 ], 
    [ 13.31, 52.80 ], 
    [ 13.31, 52.79 ]]] 
  }
};

M2.9103830456733704e-11,282.68992037849966
L400,282.68992037849966
L400,117.31007962138392
L2.9103830456733704e-11,117.31007962138392Z

Довольно сложно, верно? Давайте упростим это.

M0,282L400,282L400,117L0,117Z

Это выглядит не так уж плохо. Давайте разберем это еще дальше.

Создание простого прямоугольника

Создание прямоугольника — простой пример. Вы бы не использовали path элемент для него, но это хороший способ изучить d атрибут. Так что мы делаем это в любом случае.

M10,10L10,20L20,20L20,10Z

Очень похоже на нашу версию выше, верно? Если мы взглянем на то, что это за вещи, все станет более понятным.

М, м (Перейти к)

Переместить текущую точку в координаты x,y Mx,y M10,20
верхний регистр: абсолютный
нижний регистр: родственник

Л, л (LineTo)

Нарисуйте линию от текущей точки до конечной точки, указанной x, y Lx,y L20,30

Z

Закройте элемент. Что означает кратчайшую прямую линию до начала многоугольника.

Пример прямоугольника

Давайте снова посмотрим на наш пример с прямоугольником. Теперь с реальными ценностями. Итак, мы начинаем с 10,10 а затем нарисуйте линию, чтобы 10,20 и оттуда линия до 20,20 а затем 20,10 и закрыть элемент (который вернется к 10,10).

Если мы вернемся к нашему примеру из GeoJSON. Аналогично: начать с 0,282 провести линию к 400,282 другая линия к 400,117 а затем 0,117 и закройте элемент (вернитесь к 0,282 )

Это всего лишь краткое объяснение простого случая. Элемент пути способен на гораздо большее. Но нам достаточно знать это. D3 предлагает нам отличных помощников, поэтому нам не нужно иметь с ним дело напрямую.

Вот отличная иллюстрированная статья, которая еще глубже раскрывает тема