Клуб API Карт

Переопределить svg иконку

Пост в архиве.

Нарисовал я допустим свой svg:

    <svg style="position: absolute; left: 0px; top: 0px; width=100px; height:124px">

        <g style="stroke-width:0;">

            <path d="M 50 124 l 14.6 -26.2 A 50 50 0 1 0 35.4 97.8" fill="#005baa"/>

            <circle cx="50" cy="50" r="36" fill="white"></circle>

            <polygon points="54.5,50.75,66.25,37,52.75,42.5,28.5,37.25" fill="#ed1c24" />

            <polygon points="44.25,48,75.5,63.75,46,57.75,30.5,64" fill="#005baa"/>

            <circle cx="52.75" cy="36.25" r="4.25" fill="#005baa"></circle>

        </g>

    </svg>

и хочу создать свой темплейт иконки и менять её цвет как мне вздумается. Что-то никак не могу найти в документации ничего.

11 комментариев

вам надо дать ссылку на svg-файл через опцию imageHref. Но в ие, естественно, работать не будет

хм, а если я не хочу делать дополнительный гет-запрос на каждую иконку разного цвета, а просто сформировать их из темплейта?

Тогда вам надо создать свой макет для иконки через templateLayoutFactory, в него зашить свг-макет и все цвета заменить на какую-нить опцию. {% options.color %}

Затем этот макет надо задавать для иконок и через опции выставлять нужный цвет.

Большое спасибо за разъяснения!

К сожалению у меня ещё осталось два вопроса:

 

1) вот тут пример набросал: 

https://gist.github.com/Kamapcuc/8402676

под 2.0-stable он работает, а под 2.1.4 не работают события (mouseover и пр.)

как заставить работать события на версии 2.1.4?


2) есть ли возможность не создавать лэйаут для каждого цвета иконок, а создать один, и менять его цвет вот так:

ymaps.option.presetStorage.add('sm#icon1', {

iconLayout : myLayout1,

iconColor : '#005baa'

});

долго эксперементировал с $[], но никак не получается :-(.

1. В версии 2.1 мы все объекты унесли под слой событий. То есть дом-ноды больше не прокликиваются напрямую. Для того, чтобы объекты стали интерактивными, нужно переопределить метод getShape у макета - он должен возвращать соответствующий площадной объект.

 

2. Вы на верном пути.

Только в самом шаблоне надо задать вместо цвета вот так {% color %}

Тогда при создании макета по этому шаблону в шаблон автоматически подставится значение iconColor из пресета.

Спасибо, сам бы я ещё долго разбирался.

1) пока ещё перевариваю

2) Только наверно не так {% color %}, а судя по всему, так: $[options.color] (слава телепатии %) ). По крайней мере, второй вариант работает, а первый - нет.

а, надо наверное {% options.color %}

нет, так тоже не работает )))

 

С формой тоже разобрался: return new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle([0, -18.5], 12.5));

Спасибо вам, Марина!


Желаю вам скорее зарелизится и заняться как следует документацией апи. :)

Рада, что удалось помочь, спасибо за пожелания))

С Baidu апи я если честно разобрался намного быстрее, хотя там документация на китайском...

why we call it beta? because it beta then nothing