Как обернуть ссылкой 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>

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

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

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

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

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

Михаил Гильмутдинов @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>

проверить

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

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

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

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

Войти через центр авторизации

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

JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 3 часа назад
- 17 просмотров
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 8 часов назад
- 31 просмотр
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 9 часов назад
- 49 просмотров
0

ответов
HTML

+1 ещё

Простой
Как добавить разный фон в ::before для объектов с одинаковым стилем?
- 1 подписчик
- 9 часов назад
- 19 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 10 часов назад
- 25 просмотров
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 11 часов назад
- 52 просмотра
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 17 часов назад
- 52 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 17 часов назад
- 55 просмотров
1

ответ
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- вчера
- 59 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- вчера
- 188 просмотров
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Подключить сервер к сети

27 апр. 2024, в 02:39

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

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

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

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

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

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

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

svg, css,js

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

а так нельзя ?

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

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

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

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

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

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