svg in data uri not rendered

Я пытаюсь создать svg pushpin для бинговых карт с использованием динамического сгенерированного svg (example). К сожалению, это не делает вывод правильно на карте. Я раскопал и обнаружил, что API-интерфейс bing-карт устанавливает src в кодированное base64 изображение.svg in data uri not rendered

Итак, я попытался скопировать источник изображения в скрипт 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. В чем проблема?

источник

2017-01-18 Sven-Michael Stübe

SVG изображения тег не поддерживается в Bing Maps, так как элемент управления картой принимает SVG и сразу рисует их на холсте HTML. Таким образом, изображение не имеет возможности загрузить. – rbrundritt

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

источник

2017-01-18 19:38:48

Есть ли хороший способ сделать это без запроса изображения через http вручную? –

зависит от того, поддерживает ли gravatar CORS, если это возможно, вы можете сделать это в javascript через XMLHttpRequest. –

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

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

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

преднатяга изображения объекта (массив объектов)
рисовать изображения и/или другие примитивы в холст и использовать холст в Pushpin

источник

2017-04-24 21:35:43 Semionoff

svg in data uri not rendered

ответ

Смежные вопросы