Как поместить svg в ссылку?

Question

[Виталий Ильницкий]

Есть у меня такая картинка в свг, нужно при нажатии на комнату должно открываться другое модальное окно, поместил каждую комнату в ссылку, вот пример:

<g id="_x34_8_x2C_05">
	<a xlink:href="#" class="link-room" >
	<rect x="449.3" y="624.8" class="st3" width="243" height="273.6"/>
	</a>
</g>

Но ничего не работает, в чем проблема?

Answer 1

[Максим]

вот это посмотри , так проще
но и с svg тоже можно но чуток сложнее

Answer 2

[sergey]

синтаксис таков:
<a xlink:href="ссылка">svg элементы</a>
ну и готовый пример:

<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <a xlink:href="http://webix.pro/">
  <text x="20" y="20">SVG-cсылка на главную страницу</text>
 </a>
</svg>

Comments

[Максим]

а если к примеру это не просто как в вашем случае свг а целая фигура с патернами и всякими плюшками , как определять координаты в автоматическом режиме ?

[Виталий Ильницкий]

так а в чем отличие от того что я написал?

[sergey]

Виталий Ильницкий: в том что это работает:)

[Виталий Ильницкий]

SM: так напишите что не так, я не понимаю

[sergey]

Виталий Ильницкий: полный код svg покажите

[Виталий Ильницкий]

SM: https://codepen.io/vetalil18/pen/zZpyOV

[sergey]

Виталий Ильницкий: не могу понять куда у вас ведет ссылка по картинке, вот вы кликнули и куда? я показал в примере переход по ссылке на сайт (тоесть указал путь ссылки)

[Виталий Ильницкий]

SM: я там хочу повесить обработчик событий, при нажатии на квартиру, должна открываться страница квартиры