Вопрос: Как вызвать оверлейные гиперссылки в SVG? - PullRequest
Новая
       33

Вопрос: Как вызвать оверлейные гиперссылки в SVG?

0 голосов
/ 25 апреля 2019

Мне нужно представить факсимильные копии статей, которые я написал, с кликабельными ссылками на моей веб-странице портфолио. Подход, который кажется наиболее подходящим для работы, - это imagemaps в svgs, потому что гиперссылка сохраняет свою позицию на изображении, когда изображение отвечает на разные размеры экрана. (Я уже пробовал использовать инструмент слайсинга в Photoshop, с которым слишком сложно работать, и Adobe Muse, который прост, но плохо обрабатывает адаптивные карты) Мне удалось создать адаптивные изображения со ссылками, встроенными в другое стр. Теперь моя проблема состоит в том, чтобы заставить эти ссылки запускать плагин javascript (Floatbox), который представляет наложения. Я не могу заставить их работать, и на самом деле я продолжаю ломать импортированные .svg. Обычно я запускаю такую ​​ссылку примерно так: 

<a href="website/" class="floatbox" data-fb-
options="width:80% height:80% scrolling:yes">Website Function</a>

Но это не работает здесь. Вот как я сейчас настроил образец страницы с сильно усеченным представлением импортированного изображения, только для контекста, и ссылкой, представленной в ее исходном (неизмененном) состоянии: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Declaration</title>
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
</head>
<body>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 882.5 245.9" style="enable-background:new 0 0 882.5 245.9;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.35;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<image style="overflow:visible;" width="750" height="209" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAADRCAYAAACTrj
WiZHqpWs2ra3VpcUIHa9SXqqpTl7bIMTyBQNNl13NkAT59pgAWq1evp/A/lH6dv6rBKPAAAAAElF
TkSuQmCC" transform="matrix(1.1767 0 0 1.1767 0 0)">
</image>
<a xlink:href="https://www.loc.gov/resource/rbc0001.2004pe76546/?sp=1" >
<rect x="94.5" y="67.5" class="st0" width="773" height="55"/>
</a>
</svg>  
</body>
</html>

Буду очень признателен за любые предложения о том, что мне нужно сделать, чтобы вызвать Floatbox в ссылках. В то время как я спрашиваю, я должен указать, что есть много, что я не знаю о языке кодирования. Я самоучка. Так что чем конкретнее предложения, тем лучше. Заранее спасибо.

...