Как обернуть ссылкой object svg?

Question

Михаил Гильмутдинов @Mixailhr

Как обернуть ссылкой object svg?

Не понимаю в чем загвоздка

Не получаются следующие варианты:

<a xlink:href="/" class="navbar-brand"><object id="logo" type="image/svg+xml" data="....svg">Вставка SVG</object></a>

Пробовал вставить внутри .svg - но почему-то открывается ссылка внутри самого контейнера SVG. Да и такой вариант не подойдет, так как ссылка работает при нажатии не на контейнер, а на

<svg id="..." data-name="..." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 815.05 131.93">
<a xlink:href="/"
<path></path>
</a>
</svg>

Вопрос задан более трёх лет назад
3828 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 1

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

Михаил Гильмутдинов @Mixailhr Автор вопроса

не работает!

Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG

Михаил Гильмутдинов: а почему у меня работает ? может у вас другая структура ? весь код svg на codepen.io и сюда ссылку , разберёмся

Написано более трёх лет назад
Михаил Гильмутдинов @Mixailhr Автор вопроса

Максим Ленский: https://codepen.io/mixailhr/pen/wdyjMN

Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG

Михаил Гильмутдинов: https://codepen.io/Geyan/pen/jmZxwE вот Google откроется

Написано более трёх лет назад
Михаил Гильмутдинов @Mixailhr Автор вопроса

Спасибо)))

Написано более трёх лет назад
Степан Прибытко @stepanpr
Максим Ленский, Михаил Гильмутдинов,
Ссылка устарела ( https://codepen.io/Geyan/pen/jmZxwE ), у меня тот же вопрос что и у Михаила... Не работает ссылка, в которую завернут object:
<a class="social__icon vk" href="http://toster.ru" target="_blank"> <object type="image/svg+xml" data="img/icons/vk.svg">Your browser does not support SVGs</object> </a>

Помогите пожалуйста!
P.S. https://codepen.io/stepanpr/pen/EBbJRp
Написано более трёх лет назад
Максим @LenovoId Куратор тега SVG
Степан Прибытко, В общем смотри какая штука получается:
Если Мы добавляем SVG как Object то это типа iframe и так просто мы не можем его обернуть
Выход такой => открыть файл с иконкой в текстовом редакторе, и поместить саму иконку между тегом
<a xlink:href="http://toster.ru"> <g transform="translate(5.5458227e-8,-235.07882)"> <text transform="scale(.93043466 1.0747665)" x="-1.1108021" y="276.33908" fill="#000000" font-family="'Times New Roman'" font-size="76px" stroke-width="1" font-weight="900">vk</text> </g> </a>

потом в head svg добавим вот это

xmlns:xlink="http://www.w3.org/1999/xlink"

сохраняем и получаем в итогу ссылку но только в SVG а выводить иконку можно хоть через object хоть img

Понимаешь ?
Написано более трёх лет назад
Степан Прибытко @stepanpr

Максим Ленский, Максим, спасибо огромное!!!!!!!

Написано более трёх лет назад

Максим @LenovoId Куратор тега SVG

Степан Прибытко, Примерно это так :
сохранить как image.svg

<svg width="100" height="100px"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href='http://youtube.com' target="_blank">
    <rect x="5" y="5" width="90px" height="90px"/>
  </a>
</svg>

сохранить как index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<object type="image/svg+xml" data="image.svg" >
   Your browser does not support SVG
</object>
</body>
</html>

проверить

Написано более трёх лет назад

EVGenyK_ch @EVGenyK_ch
Вдруг кто тут окажется, такой как я)))
я нашел другое решение которое помогло попроще сделать чем в комментариях к прошлому ответу.
к тегу object добавить свойство pointer-events: none; для меня это решение оказалось на порядок проще)
пример:

<a class="social-links__link" href="+social_link" target="_blank"> <object type="image/svg+xml" data="+social_icon" width="25" height="25"> <img src="+social_icon" width="200" height="200" alt="image format png" /> </object> </a>
Написано 01 июл.

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 9 часов назад
- 33 просмотра
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 12 часов назад
- 27 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 12 часов назад
- 88 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 15 часов назад
- 44 просмотра
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 111 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

1500 руб./за проект

Телеграм бот

22 нояб. 2024, в 02:56

10000 руб./за проект

Перерисовать логотип в векторе

22 нояб. 2024, в 00:55

500 руб./за проект

Answer 1 · 2017-05-10 12:29:14

Максим @LenovoId Куратор тега SVG

svg, css,js

<a href=""> 
  <svg> 
    this is code svg
  </svg>
 </a>

а так нельзя ?

Ответ написан более трёх лет назад

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

Как обернуть ссылкой object svg?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт