Невозможно заставить XLink работать в файле SVG

Я должен преобразовать текст SVG в рабочую гиперссылку. У меня есть следующий код (я добавил тег привязки):

<svg class="crocodoc-4Z7fb6 crocodoc-page-svg" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xml:space="preserve" width="720pt" height="547pt" viewBox="0 0 720 547">
<xhtml:link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<defs>
<image id="Image_35_3_4Z7fb6" width="176" height="243" xlink:href="images/35.png" />
<image id="Image_41_3_4Z7fb6" width="175" height="241" xlink:href="images/41.png" />
<image id="Image_37_3_4Z7fb6" width="176" height="243" xlink:href="images/37.png" />
<clipPath id="Clip_0_3_4Z7fb6"><path d="M0 547 l720 0 l0 -547.2 l-720 0 l0 547.2 " /></clipPath>
<image id="Image_39_3_4Z7fb6" width="176" height="243" xlink:href="images/39.png" />
</defs>
...
<a xlink:href="http://www.mylink.com" target="_blank"><text class="fh" font-size="12.96"
style="fill:#d52b1e"><tspan x="197.66" y="361.55"  
textLength="128.81"dx="0,-0.09,-0.09,-0.09,0,0,0,0,0.04,0,0,0,0,0,0.13,0,0,0,0.1,0">
www.mylink.com</tspan></text></a>
...
</svg>

Изображения загружаются нормально, но текст, который я обернул тегом, не кликабелен. Кто-нибудь может посоветовать, что я тут делаю не так?

2 ответа

У нарушителя в конце был тег пути:

<path d="M0 547 l719.98 0 l0 -547.2 l-719.98 0 l0 547.2 z " style="stroke:#000000;
stroke-width:1.92;stroke-linejoin:round;"/>
</svg>

Как только я удалил метку пути (которая мне в любом случае не нужна), ссылка сработала. Не знаю точно, почему, я думаю, путь каким-то образом скрывает кликабельный элемент. Спасибо Роберту Лонгсону за хедз-ап.

Если это поможет, я нашел решение, используя jquery mobile. Мой проект требует jquery mobile, не самый лучший, но это только начало!

// .map is the class for the link/svg/group/path/etc
$(".map").click(function () { 
            $.mobile.navigate("#map-viewer");
        });

Надеюсь, это поможет кому-то!

Другие вопросы по тегам