Вложенные SVG в другой SVG с выравниванием по центру

#html #css #svg

Мне нужно поместить иконки SVG произвольной формы, то есть не обязательно квадратные,
поверх SVG  маркера.  

Я могу легко разместить их, но я не знаю, как их выравнивать относительно  внешней
формы иконки маркера  по вертикали и горизонтали.  

    

Маркер SVG  








Иконка SVG: 








С наложением иконки (неправильное выравнивание):  







    

Ответы

Ответ 1

Это очень просто: 

Вставьте свою иконку 

Ответ 2

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


А если потребуется использовать иконки многократно, в качестве
маркеров на карте?


Тогда придется использовать другое решение для позиционировании составных частей
иконки относительно друг друга. 

Это можно сделать с помощью команды transform="translate(2.5 2)"  


Добавляем растровую карту в svg     


   


Клонируем и одновременно позиционируем иконки на карте  


 

Ниже полный код:








UPDATE  

При клонировании значков их можно стилизовать. 

Для этого удаляем атрибут fill="#006893" у родителя и раскрашиваем детей в разные цвета: