2

Здравствуйте! Вопрос такой: У меня есть 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. Ну короче, понять не могу никак, что я делаю не так.

1
  • Просто заинлайни svg в html.
    – Qwertiy
    25 сен 2017 в 18:27

2 ответа 2

1

Ссылка на внешний ресурс из SVG файла

Этот способ является самым надежным, но при одном обязательном условии - наличие возможности отредактировать svg файл. А такая возможность у вас есть, - вы обладаете файлом: Absolut-Logo.svg

Последовательность действий

  • Возьмите файл, в который добавлена ссылка на внешний ресурс. Я не знаю куда вам нужно переходить по ссылке, поэтому сделал для примера переход на статью по svg википедии.

    <a href="http://ru.wikipedia.org/wiki/SVG" target="_blank"> ... </a>

ниже полный код файла "Absolut-Logo.svg"

UPD 30.09.2017

Код файла изменен, снова его скачайте и залейте на свой ресурс. Изображения не видно (оно белого цвета), но оно появится при добавлении фона в html страничке, см. пример ниже.

  <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 path {fill:inherit; stroke:inherit;}
#logo { fill: #fff;  transition: fill 0.1s; }
#logo:hover  { fill: #4e86b1; }

  </style>
  </defs>
  <title>an-logo-white</title>
 <a href="http://ru.wikipedia.org/wiki/SVG" target="_blank">
 <g id="logo">
<rect width="78" height="14.93" fill="none"/> 
   <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>
  </a>
 </svg>

  • Разместите этот файл на своем сервере. В моем варианте я разместил файл на сайте svg-art.ru

    https://svg-art.ru/files/Absolut-Logo.svg

  • Добавьте вызов внешнего svg файла из своей html странички

UPD 30.09.2017

Картинка белого цвета на сером фоне

<style>
body {
background:#d3d3d3;
}
</style>
<object type="image/svg+xml" data=" https://svg-art.ru/files/Absolut-Logo.svg">Your browser does not support SVGs</object>

Для примера вызов внешнего svg с jsfiidle

Если вы сделаете всё точно по инструкциям этого поста, то всё у вас должно заработать. Если не будет работать ищите у себя ошибки в верстке. Здесь и в других местах всё работает.

3
  • Спасибо, я выше писал, что такой способ я уже делал. Обратите внимание, на тот код, который вы указали. Он рабочий - верно. Все условия соблюдены, однако картинка стала чёрной, вместо белой (какая была изначально), и появился белый фон. Вот именно с этой проблемой я и столкнулся. И ни один стиль, применяемый внутри самого свг файла - не срабатывает по нормальному.
    – user268323
    29 сен 2017 в 20:17
  • @Gwai посмотрите свой пример в вопросе. картинка у вас изначально была и есть черная! Надо чтобы была белая? Сделаю, но тогда, чтобы её было видно белую картинку надо добавить цветной фон. 29 сен 2017 в 21:18
  • @Gwai картинка стала белая, фона в svg файле нет. Если захотите добавить фон в svg файл, исправляйте строчку <rect width="78" height="14.93" fill="none"/> Сейчас, чтобы стало видно картинку добавляется фон в html файле body {background:#d3d3d3;} Надеюсь мои труды будут отмечены я и так потратил на вас очень много времени. 29 сен 2017 в 22:14
1

Есть два варианта сделать картинку svg кликабельной:

#1

Заменить тег <object> на <img>

<img src="img/Absolut-Logo.svg" width="78" height="14.93" alt="image description">

вариант для браузеров не воспринимающих svg производится подмена на файл *.png

 <img src="img/Absolut-Logo.svg" onerror="this.onerror=null; this.src='img/Absolut-Logo.png'">     

подробнее здесь

#2

Так как ссылка контента <object> работает только когда он неактивен, то необходимо указать в css свойствах pointer-events: none;

a{
    display: inline-block;
}
object{
    pointer-events: none;
}
<a href="https://www.google.ru" target="_blank">
    <object data="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg" type="image/svg+xml">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" style="
    width: 250px;"/>
    </object> 
</a>

http://jsfiddle.net/energee/UL9k9/

3
  • Спасибо, однако немного неверный ответ все равно получился. Логотип портала в шапке и логотип "Абсолют" в меню внедряются как внешние SVG. АБСОЛЮТ (что в вопросе) я внедряю только через OBJECT, чтобы сделать эффект hover на данном ВНЕШНЕМ файле. Вот именно из-за того, что SVG является ВНЕШНИМ, у меня и не получается сделать обернуть всё это дело в нормальную ссылку.
    – user268323
    27 сен 2017 в 11:58
  • @Gwai вариант #2 подходит к вашей задаче. Посмотрите внимательно, так как я не могу разместить ваш svg файл на внешнем ресурсе, я взял чужой svg файл, обернул как вы хотели в object и добавляю в html и одновременно оттуда вызываю по ссылке другой ресурс, вы можете сделать точно также (вызывать внутренние страницы или другие ресурсы ) посмотрите пример jsfiddle.net/energee/UL9k9 Решение, которое предложил вам я абсолютно рабочее, я его не придумывал, им пользуется весь мир И в конце концов принято благодарить плюсиками за потраченное чужое время 27 сен 2017 в 12:44
  • я понимаю, что вариант рабочий. Он работает если есть подмена svg на img. Эффект HOVER, не работает на таком элементе (если подключен svg) при Вашем варианте. Он работает только на IMG. Если не делать такую подмену - то и не работает ссылка. У меня в задании четко прописано, только SVG файл и только внешним подключением. Ссылку можно засунуть в сам SVG, там работает, но с эффектом HOVER он начинает косячить и при наведении на object получается совсем другой эффект.
    – user268323
    29 сен 2017 в 10:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.