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

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

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

Подписаться 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 июл.

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

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

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

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

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

HTML

+1 ещё

Простой
Почему html,vs code.в текстовом файле открывается весь набранный код?
- 1 подписчик
- 9 часов назад
- 74 просмотра
2

ответа
HTML

+2 ещё

Простой
Как поставить видео на всю ширину флекс элемента?
- 1 подписчик
- 10 часов назад
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 20 часов назад
- 97 просмотров
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- вчера
- 160 просмотров
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 83 просмотра
3

ответа
CSS

Простой
Как сделать общий градиент для двух блоков?
- 1 подписчик
- 02 нояб.
- 100 просмотров
1

ответ
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 337 просмотров
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 106 просмотров
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 62 просмотра
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 110 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Настроить интеграцию между Voximplant Kit и Dialogflow CX

06 нояб. 2024, в 03:35

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

Оптимизация ботов телеграм

06 нояб. 2024, в 00:20

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

Смарт-контракт на блокчейне TON

06 нояб. 2024, в 00:03

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

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?

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

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

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