Как наложить прозрачный svg на карту по заданным координатам?

Пост в архиве.

venireman

31 октября 2016, 17:35

Сейчас делаю так, но в Firefox оверлей получается не прозрачный, а с белым фоном:

var rectangle = new ymaps.Rectangle(map.getBounds(), {}, {
    cursor: "dragCursor",
    outline: false,
    strokeOpacity: 0,
    fillImageHref: 'https://upload.wikimedia.org/wikipedia/en/5/54/RCA_dog.svg'
});

http://jsbin.com/vusuwaz/edit?html,output

3 комментария

Авторизуйтесь, чтобы оставить комментарий

Всеволод Шмыров

31 октября 2016, 19:11

Добрый вечер. Дело в самом изображении. У этой SVG есть фон (тег enable-background в элементе svg).

venireman

31 октября 2016, 20:33

Всеволод Шмыров,

Дело не в фоне. Вот другая картинка без фона тоже непрозрачна в Firefox - http://jsbin.com/yoceta/edit?html,output

В Хроме такой проблемы нет, обе картинки прозрачны.
Также эти svg прозрачны при наложении через Leaflet во всех браузерах - http://jsbin.com/hulika/edit?html,output

Всеволод Шмыров

2 ноября 2016, 12:42

venireman,

Проблемы вызвана багом в Firefox при отрисовке SVG изображения на canvas. Как раз и добавляется белый фон. В примере leaflet просто накладывается изображение поверх карты. А вам нужно наложить SVG изображение как текстуру? Можно просто задать изображение вместо метки img. http://jsfiddle.net/ykn6ssfa/