Нарисуйте изображение SVG на путях, но настолько большое, насколько это необходимо.

Поэтому я хотел бы показать изображение на пути. Пути создаются через координаты topojson. Точки находятся в правильном положении на моей карте. Следующее, что нужно сделать, это показать SVG-изображение в этой точке.

Я пробовал это с добавлением svg:image, но без шансов. Я также попытался ввести его в путь с тем же результатом. Я нигде не вижу этого изображения. Вот пример с изображением PNG. Потому что, по крайней мере, это должно работать, чтобы исключить проблемы с SVG:

var featureCollection = topojson.feature(currentMap, currentMap.objects.points);
    svgmap.append("path")
          .attr("id", "points")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path);
    svgmap.append("svg:image")
        .attr("class","svgimage")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("x", -20)
        .attr("y", -20)
        .attr("width", 13)
        .attr("height", 13);

Редактировать

svgimage.append("pattern")
        .attr("id","p1")
        .attr("patternUnits","userSpaceOnUse")
        .attr("width","32")
        .attr("height","32")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 10)
        .attr("height", 10);
    svgmap.append("g")
        .attr("id", "points")
        .selectAll("path")
        .data(featureCollection.features)
        .enter().append("path")
        .attr("d", path)
        .attr("fill", "url(#p1)");

Но все еще не работает.

Редактировать2

Я упомянул, что это проблема с размером. Так что теперь я немного поиграл с размерами, и там я вижу еще несколько, но большинство из них не полностью изображены. Просто какие-то кусочки круга как-то. Странная вещь. Я продолжаю тестировать:

svgimage.append("pattern")
        .attr("id","p1")
        .attr("patternUnits","userSpaceOnUse")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 15)
        .attr("height", 15);

Вот изображение текущего результата (jpg): http://i.imgur.com/T58DA1j.png еще не совершенен. Это когда я увеличиваю pointRadius (теперь это SVG): http://i.imgur.com/Z7nZUWk.png


javascript svg coordinates d3.js topojson
person kwoxer    schedule 28.01.2015    source источник
comment
См. stackoverflow.com /вопросы/3796025/   -  person Robert Longson    schedule 28.01.2015
comment
Да уже посмотрел на это. См. выше. Это все еще не работает. =( Я пытаюсь создать для этого jsfiddle.   -  person kwoxer    schedule 28.01.2015
comment
Хорошо, этот отредактированный код запустил его, но с большой проблемой. У меня 20 баллов, но только один (5.!) получил изображение сейчас, также после перезагрузки. Остальные по-прежнему невидимы (без фона).   -  person kwoxer    schedule 28.01.2015
comment
Добавлено изображение, показывающее проблемы.   -  person kwoxer    schedule 28.01.2015

Ответы (1)


arrow_upward
1
arrow_downward

Решение довольно простое. Размер изображения был просто неправильно установлен. Также необходимо удалить userSpaceOnUse, и при необходимости вы можете установить позицию создания с помощью x и y:

svgimage.append("pattern")
        .attr("id","p1")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 5)
        .attr("height", 5)
        .attr("x", 1)
        .attr("y", 2);

и во второй части важно установить pointRadius. Вы можете установить его непосредственно в пути или в определении. Если вы хотите использовать другие размеры позже, имеет смысл установить его непосредственно в пути:

.attr("d", path.pointRadius(3.5))
person kwoxer    schedule 03.02.2015