Итак, я разрабатываю сайт, который использует Google Maps JavaScript API. У меня есть несколько маркеров, для которых я хотел бы создать значок SVG, но этот SVG должен использовать переменные JavaScript (для отображения числа на значке), а также отображать внешний SVG (например, значок FontAwesome).
Мне удалось сгенерировать значки с переменными JavaScript следующим образом:
let newIcon = [
'<svg width="' + size + 'px" height="' + size + 'px" viewBox="0 0 100 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >',
'<ellipse id="circuloExterior" fill="' + mainColor + '" cx="50" cy="50" rx="42.8" ry="42.8"/>',
'<polygon id="triangulo" fill="' + mainColor + '" stroke="' + mainColor + '" stroke-width="1.6" points="28,83 72,83 50,108"/>',
'<ellipse id="circuloIntermedio" fill="' + mainColor + '" cx="50" cy="50" rx="41.2" ry="41.2"/>',
'<ellipse id="circuloInterior" stroke="' + mainColor + '" fill="' + secColor + '" stroke-width="1.6" cx="50" cy="50" rx="32" ry="32"/>',
'</svg>',
].join('\n');
newIcon = {
url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(newIcon),
}
И затем я использую newIcon в качестве значка маркера. Это работает без проблем.
Но, когда я пытаюсь подключиться к внешнему SVG, который я хотел бы добавить к значку (наряду с существующим), он не работает:
<image xlink:href="<link to external SVG on the same server>" />
Я попытался создать файл SVG с точно такой же внешней ссылкой SVG, и он работает автономно, поэтому с тегом image проблем нет.
Я также пытался явно указание SVG в качестве пути вместо ссылки на него, и это работает, но это не совсем то, что я ищу:
<g transform="translate(30,25) scale(0.13)"><path fill="#000000" d="M128 288c0-6.25-2-12.25-5-17.25-3.25-5-16.5-22-21.75-38.75-0.75-2.75-3.25-4-5.25-4s-4.5 1.25-5.25 4c-5.25 16.75-18.5 33.75-21.75 38.75-3 5-5 11-5 17.25 0 17.75 14.25 32 32 32s32-14.25 32-32zM256 256c0 70.75-57.25 128-128 128s-128-57.25-128-128c0-25.25 7.75-48.75 20.25-68.75 12.75-20 66.25-87.75 86.5-155.25 3.25-10.75 13.25-16 21.25-16s18.25 5.25 21.25 16c20.25 67.5 73.75 135.25 86.5 155.25s20.25 43.5 20.25 68.75z"/></g>
Любые советы? Спасибо.