SVG ссылка как object не через JS

312

25 сентября 2017, 01:00

Здравствуйте! Вопрос такой: У меня есть svg файл, там логотип компании. Он имеет пару стилей. Вставляю его в HTML я через object, т.к. по другому эффект :hover не работает. Столкнулся с проблемой, что теперь я не могу назначить правильно ссылку на переход на главную страницу сайта. Где то может есть ошибка?

Это код SVG файла, он внешний.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="14.93" viewBox="0 0 78 14.93"><defs> 
	<style type="text/css"> 
    svg { fill: #000; transition: fill 0.1s;} 
    svg:hover { fill: #4e86b1; } 
  </style></defs><title>an-logo-white</title><g id="Слой 2" data-name="Слой 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M68,14.32h5a5,5,0,0,0,0-10V6.46a2.86,2.86,0,0,1,.24,5.71H70.1V0H68Z"/><path class="cls-1" d="M66.91,11.94V4.32h-5a5,5,0,0,0,0,10V12.19a2.86,2.86,0,0,1-.24-5.71h3.14v5.46Z"/><path class="cls-1" d="M12.45,5.91H10V4.85h4V3.77H8.58V9.5h3.9c1.36,0,2-.35,2-1.79S13.81,5.91,12.45,5.91Zm-.13,2.45H10V7h2.42c.71,0,.78.21.78.64S13.06,8.36,12.32,8.36Z"/><path class="cls-1" d="M5.07,3.77H3L0,9.5H1.6l.74-1.45H5.73L6.47,9.5H8.08ZM2.9,7,4,4.84h.07L5.18,7Z"/><path class="cls-1" d="M19.66,8.36H17.9c-.78,0-1.1-.16-1.1-1V5.9c0-.9.19-1.06,1.1-1.06h1.76c.79,0,1.1.26,1.1.86h1.37c0-1.61-.85-2-2.2-2H17.64c-1.68,0-2.22.47-2.22,2.15V7.47c0,1.53.5,2,2.09,2h2.55c1.69,0,2.06-.46,2.07-2H20.75C20.75,8.21,20.47,8.36,19.66,8.36Z"/><path class="cls-1" d="M27.61,3.7H25.1c-1.56,0-2.11.47-2.11,2v1.8c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.74C29.68,4.13,29,3.7,27.61,3.7Zm.7,3.69c0,.78-.2,1-1.07,1H25.43c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.77c.82,0,1.1.19,1.1,1Z"/><path class="cls-1" d="M31.06,7.26c0,.83-.13,1.1-.84,1.1V9.5h.58c1,0,1.63-.61,1.63-2.08V4.91h3.22V9.5H37V3.77h-6Z"/><path class="cls-1" d="M45.33,3.7H42.81c-1.56,0-2.11.46-2.11,2V6H39.32V3.77H37.95V9.5h1.37V7.1H40.7v.44c0,1.39.58,2,2.11,2h2.52c1.6,0,2.07-.53,2.07-2V5.73C47.4,4.12,46.75,3.7,45.33,3.7ZM46,7.39c0,.78-.2,1-1.07,1H43.14c-.83,0-1.07-.21-1.07-1V5.87c0-.82.24-1,1.1-1h1.76c.82,0,1.1.19,1.1,1Z"/><polygon class="cls-1" points="48.19 3.77 48.19 4.91 50.58 4.91 50.58 9.5 51.95 9.5 51.95 4.91 54.36 4.91 54.36 3.77 48.19 3.77"/><path class="cls-1" d="M.7,12.47H2.47v-1.1h.69v2.87H2.47V13H.7v1.2H0V11.37H.7Z"/><path class="cls-1" d="M4.21,11.37H7.15v.54H4.9v.63H7.08V13H4.9v.66H7.15v.54H4.21Z"/><path class="cls-1" d="M8.62,12.74V11.37H11.5v2.3h.32v1.26h-.62v-.69H8.71v.69H8.08V13.67h.19A1.16,1.16,0,0,0,8.62,12.74Zm2.18-.8H9.28v.94a1.27,1.27,0,0,1-.23.79h1.76Z"/><path class="cls-1" d="M12.76,11.37h2.07c.64,0,1,.19,1,.72s-.12.56-.36.64a.59.59,0,0,1,.47.67c0,.62-.31.84-1,.84H12.76Zm.69,1.16h1.4c.19,0,.28-.14.28-.34a.26.26,0,0,0-.29-.29h-1.4Zm0,1.17h1.38c.37,0,.42-.08.42-.34s0-.32-.39-.32h-1.4Z"/><path class="cls-1" d="M17.7,13.67h.1l1.75-2.3H20.7v2.87H20v-2.3h-.09l-1.73,2.3H17V11.37h.69Z"/><path class="cls-1" d="M24.2,13h-.35l-1.25,1.23h-.92l1.58-1.53-1.51-1.35h1l1.13,1.07h.34V11.37h.69v1.07h.34l1.13-1.07h1l-1.51,1.35,1.58,1.53h-.92L25.24,13h-.36v1.23H24.2Z"/><path class="cls-1" d="M29.09,13.67h.1l1.75-2.3h1.15v2.87h-.69v-2.3h-.1l-1.73,2.3H28.4V11.37h.69Z"/><path class="cls-1" d="M34.49,11.37l1,2.3h0l1-2.3h1.28v2.87H37v-2.3h-.09l-1,2.3H35l-1-2.3H33.9v2.3h-.69V11.37Z"/><path class="cls-1" d="M41.08,14.24H39.81c-.77,0-1.06-.29-1.06-1v-.9c0-.79.28-1,1.06-1h1.26c.71,0,1,.22,1,1v.9C42.11,14,41.88,14.24,41.08,14.24ZM40,13.67h.91c.44,0,.54-.09.54-.48v-.76c0-.42-.14-.51-.55-.51H40c-.43,0-.55.11-.55.52v.77C39.44,13.57,39.56,13.67,40,13.67Z"/><path class="cls-1" d="M46.45,13.25c0,.77-.19,1-1,1H44.13c-.79,0-1-.24-1-1v-.82c0-.84.27-1.08,1.11-1.08h1.14c.68,0,1.11.19,1.11,1h-.69c0-.3-.15-.43-.55-.43h-.88c-.46,0-.55.08-.55.53v.71c0,.44.16.52.55.52h.88c.41,0,.55-.07.55-.42Z"/><path class="cls-1" d="M50.46,11.37v.57H49.25v2.3h-.69v-2.3h-1.2v-.57Z"/><path class="cls-1" d="M52,11.37v1.07h1.25c.68,0,1,.17,1,.9s-.34.9-1,.9h-2V11.37Zm0,2.3h1.19c.37,0,.42-.08.42-.33s0-.32-.39-.32H52Z"/></g></g></svg>

Это код (краткий) места, где этот файл используется:

<html> 
 
<body> 
  <a href="" class="b-header_menu_nav__logo_absolut"> 
    <object type="image/svg+xml" data="img/Absolut-Logo.svg">Your browser does not support SVGs</object> 
  </a> 
</body> 
 
</html>

Естественно появляется вместо надписи моё изображение, но управлять им никак я не могу, ни курсор не появляется, ни перехода по ссылке нет (которая обернута). Допустим проблему с курсором решить можно спокойно через css. Но насчет ссылки уже вопрос. Если делать

<a xlink:href="http://Yandex.ru/">
  <text x="20" y="20">SVG-cсылка на главную страницу</text>
 </a>

Без указания таргета, то происходит конкретная хрень, страница появляется ВМЕСТО object. Ну короче, понять не могу никак, что я делаю не так.

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу клонировать код JS

Есть код только для одного divМне нужно эту функцию применить к другим дивам с разными id

195

HTML

Iframe. Изменить размер содержимого

Есть iframeОн хватает сайт с онлайн игрой

358

HTML

Развертывание на весь экран блока

Приветствую

399

Мапинг параметров запроса по позиции

В общем, формирую DataTable, далее в нее заношу данные

270