svg в data uri не отображается

Я пытаюсь создать канцелярскую кнопку svg для карт Bing, используя динамически сгенерированный svg (пример). К сожалению, он неправильно отображает булавку на карте. Я покопался и обнаружил, что API карт bing устанавливает src для изображения в кодировке base64.

Поэтому я попытался скопировать источник изображения в скрипт js и посмотреть, что не так с API карт bing или браузером. Он работает для простых изображений, таких как

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <circle id="circle" cx="25" cy="25" r="25" />
</svg>

но чуть более сложные изображения не рендерятся

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <defs>
        <circle id="circle" cx="25" cy="25" r="25" />
    </defs>
    <clipPath id="clip"></clipPath>
    <image xlink:href="https://www.gravatar.com/avatar/08b73d0a58fc120a8cc8dc561d83b3d6.jpg?s=50&d=mm" x="0" y="0" height="50" width="50" />
</svg>

Скрипт JS: https://jsfiddle.net/w1yn9Lo8/6/

Оба изображения отображаются нормально, если я вставляю их непосредственно в HTML. В чем проблема?


svg html bing-maps data-uri
person Sven-Michael Stübe    schedule 18.01.2017    source источник
comment
Тег SVG Image не поддерживается в Bing Maps, так как элемент управления картой берет SVG и сразу же рисует их на холсте HTML. Таким образом, изображение не имеет возможности загрузиться.   -  person rbrundritt    schedule 18.01.2017

Ответы (2)


arrow_upward
1
arrow_downward

Когда вы используете файл SVG в качестве URI данных, у вас не может быть никаких внешних ссылок, поэтому вам придется кодировать jpg как uri данных, прежде чем кодировать файл SVG-обертки как uri данных.

person Robert Longson    schedule 18.01.2017
comment
Есть ли хороший способ сделать это без запроса изображения через http вручную? - person Sven-Michael Stübe; 18.01.2017
comment
зависит от того, поддерживает ли gravatar CORS, если это так, вы можете сделать это в javascript через XMLHttpRequest. - person Robert Longson; 18.01.2017

arrow_upward
0
arrow_downward

Проблема заключается в том, что SVG-контент кнопки не может рисовать незагруженные изображения, даже если вы используете внутренний внешний объект в SVG.

Я бы использовал холст вместо SVG. Вы можете использовать в нем все примитивы холста.

Мое решение есть: Bing Maps API v8 - pushpin SVG URI image

  • предварительно загрузить изображения в объект (массив объектов)
  • рисовать изображения и/или другие примитивы на холсте и использовать холст в канцелярской кнопке
person Semionoff    schedule 24.04.2017