Как сделать ссылку внутри SVG файла на какой-либо объект?
Приветствую.
Есть простой код:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <a href="/docs/Web/SVG/Element/circle"> <circle cx="50" cy="40" r="35" /> </a> </svg> |
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <a href="/docs/Web/SVG/Element/circle"> <circle cx="50" cy="40" r="35" /> </a> </svg>
Вариант 1
Если его вставить в HTML, то ссылка работает.
Вариант 2
Если код вставить в файл .svg и разместить в HTML ссылкe на этот файл в теге img <img src="file.svg">, то ссылка не работает.
Подскажите, пожалуйста, есть ли вариант заставить работать ссылку во втором варианте (при чтении данных SVG из файла)?
А еще заметил, что в первом варианте можно задать через стили, к примеру, при наведении на элемент и поменять ему цвет, а во втором варианте нельзя. Это какая-то особенность и никак ее не обойти и придется вставлять SVG код прямо в HTML?
Дополнительно:
Пока непонятно. Но такая есть мысль что только инфо-безопасность может мешать линкованию.
<img> - это чисто картинка, которая ведёт себя как картинка и никак иначе, никакой интерактивности.
Ты можешь либо использовать objectembedifrrame, либо преобразовать в svg symbol и использовать svg use.
Ответы:
Вставлять классическим способом — тегом <object/>.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания ссылки внутри SVG файла на определенный объект необходимо использовать элемент с атрибутами xlink:href и xlink:title.
Пример кода:
<a> </a>
В данном примере мы создаем ссылку на объект с id="some-object". При клике на круг (circle) будет выполнен переход к прямоугольнику (rect) с id="some-object".
Обратите внимание, что мы используем пространство имен xlink для определения ссылки и заголовка. Также не забудьте указать протокол в атрибуте xlink:href (например, http://example.com).
Надеюсь, данное объяснение поможет вам создать ссылку внутри SVG файла на нужный объект. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.