Переместить опорную точку изображения в центр

Question

У меня есть файл airports.json с координатами аэропорта, и я хочу прикрепить значок airport.svg к каждой из этих координат на карте с помощью функции:

function draw_airports() {

  d3.json('airports.json').then(function(airport_data) {
    var svg = d3
      .select('map_container')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    var g = svg.append('g');

    var img = g
        .selectAll('img')
        .data(airport_data)
        .enter()
        .append('svg:image')
        .attr('xlink:href', 'airport.svg')
        .attr('x', function(d) {
           return projection([d.lon, d.lat])[0];
        })
        .attr('y', function(d) {
           return projection([d.lon, d.lat])[1];
        })
        .attr('width', 8)
        .attr('height', 8);
  });

Этот код прикрепляет значок к справа и ниже своих координат на карте. Как я могу переместить точку привязки (0,0) airport.svg в центр значка?

Координатное пространство airport.svg:

Answer 1

Добавьте строку:

.attr('transform', 'translate(-4,-4)')

после назначения атрибута width / height для значка. Значение x и y перевода зависит от ширины и высоты иконки. Должно быть: x = -width / 2, y = -height / 2.