Мне нужно поместить ссылки в иконки социальных медиа в svg. Здесь у меня есть иконки SVG http://joxi.ru/a2XqZEPHwl9JWA
Это svg-код, помещенный на html-страницу, подобный этому
<div class="facebook-container">
<svg class="socials-icons facebook-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Share on Facebook</title>
<path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
</svg>
{% post_to_facebook object.get_absolute_url "" %}
</div>
У SVG есть стили - цвет заливки и цвет при наведении.
Но вы можете заметить этот код в .facebook-icon - {% post_to_facebook object.get_absolute_url ""%}
Это плагин Django, который создает ссылку для этого значка. На самом деле он создает div с классом .facebook-this, который содержит тег со ссылкой.
Как это:
<div class="facebook-this">
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//127.0.0.1%3A8000/news/middle-east-investors-meetup" target="_blank"></a>
</div>
То, что я сделал, разместил эту ссылку в верхней части иконки svg на facebook, apple to apple, используя css.
Но после этого ссылка стала покрывать значок и: hover больше не работает. Я сделал ссылку прозрачной, но она по-прежнему охватывает весь svg и не позволяет hover работать для svg.
Проблема в том, что плагин создает ссылку автоматически при отображении страницы, я не вижу других способов вставить ссылку на иконку.
Мне просто нужно, чтобы: эффект наведения работал, но поскольку svg находится под контейнером ссылок, который полностью его закрывает, он не "видит" на нем мышь.
Как мне это решить?
Любые другие способы я должен попробовать?