Текст на SVG-иконке на карте

Question

Необходимо создать шаблон значка для объекта на карте. В роли иконки выступает изображение svg.

Столкнулся с тем, что svg-фон значка (задается в iconLayout) всегда выводится поверх текста значка (задается в iconContent).

За основу я взял этот код: https://jsfiddle.net/5n9cm4zu/1/

            ymaps.ready(function () {
                var myMap = new ymaps.Map('map', {
                        center: [55.751574, 37.573856],
                        zoom: 9
                    }),

                    // Создаем шаблон иконки
                    MyIconLayout = ymaps.templateLayoutFactory.createClass([
                        '<svg width="46" height="46" style="position: absolute; top: -23px; left: -23px;">',
                            '<use href="#sym01"/>',
                        '</svg>'
                    ].join('')),

                    // Создаем объект на карте
                    myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
                        hintContent: 'Собственный значок метки',
                        balloonContent: 'Это красивая метка',
                        iconContent: 'XXX'
                    }, {
                        iconLayout: MyIconLayout,
                        iconShape: {
                            type: 'Circle',
                            coordinates: [0, 0],
                            radius: 23
                        }
                    });

                myMap.geoObjects.add(myPlacemark);

            });

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

Answer 1

Svg иконка вызывается командой <use href="#sym01"/>, поэтому добавим текст в SVG элемент с id="sym01" и позиционируем текст ниже красного кружка.

<symbol id="sym01">
  <circle cx="23" cy="23" r="20" stroke-width="6" stroke="green" fill="red"/> 
    <text x="46" y="62" font-size="18px" fill="#F07427" text-anchor="middle" > Столица РФ</text>
</symbol>

Note
Изменяя координаты x, y вы можете расположить надпись, как угодно относительно иконки: выше, ниже, правее

<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
        </style>
 <script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>   
<svg style="display: none;" >
<symbol id="sym01">
  <circle cx="23" cy="23" r="20" stroke-width="6" stroke="green" fill="red"/> 
    <text x="46" y="62" font-size="18px" fill="#F07427" text-anchor="middle" > Столица РФ</text>
</symbol>
</svg>

<div id="map"></div>
<script>
ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }),

        // Создаём макет иконки.
        MyIconLayout = ymaps.templateLayoutFactory.createClass([
            '<svg width="92" height="92" style="position: absolute; top: -23px; left: -23px;">',
                '<use href="#sym01"/>',
            '</svg>'
        ].join('')),

        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'Столица РФ',
            balloonContent: 'Это красивая метка',
            iconContent: 'XXX'
        }, {
            iconLayout: MyIconLayout,
            iconShape: {
                type: 'Circle',
                // Круг описывается в виде центра и радиуса
                coordinates: [0, 0],
                radius: 23
            }
        });

    myMap.geoObjects
        .add(myPlacemark);

});
</script>

БЛОГ НА HUSL

Текст на SVG-иконке на карте

Ответы (1 шт):