Клуб API Карт

Как наложить прозрачный 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 комментария
Подписаться на комментарии к посту
Добрый вечер. Дело в самом изображении. У этой SVG есть фон (тег enable-background в элементе svg).
v.shmyroff,
 
Дело не в фоне. Вот другая картинка без фона тоже непрозрачна в Firefox - http://jsbin.com/yoceta/edit?html,output

В Хроме такой проблемы нет, обе картинки прозрачны.
Также эти svg прозрачны при наложении через Leaflet во всех браузерах - http://jsbin.com/hulika/edit?html,output
venireman,
Проблемы вызвана багом в Firefox при отрисовке SVG изображения на canvas. Как раз и добавляется белый фон. В примере leaflet просто накладывается изображение поверх карты. А вам нужно наложить SVG изображение как текстуру? Можно просто задать изображение вместо метки img. http://jsfiddle.net/ykn6ssfa/