Question

我需要在我的投资组合网页上显示我写过的文章的传真副本，并带有可单击的链接。似乎最可行的方法是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所需执行的操作，我将不胜感激。当我问的时候，我应该指出，我对编码语言不了解很多。我是自学成才的。因此，建议越具体，效果越好。预先感谢。

问题：如何在SVG中触发叠加超链接？

0 个答案: