包含一个超链接和SVG rect元素
<a href="elements/H.php"><rect x="48.9" y="84.3" class="st0 fancybox fancybox.iframe" width="96.3" height="96.3"/></a>
我试图申请第二个名为＆＃34; fancybox fancybox.iframe＆＃34;到主要的一个班级＆＃34; st0＆＃34;。第二个类应该在父页面上方的iframe窗口中打开超链接。可以看出here，这不起作用。我尝试实现的一个工作示例是使用区域标记，并且是here。
根据www.w3.org，
多个类名必须用空格字符分隔。
问题是班级名称中的空格？我试过把class =＆＃34; fancybox fancybox.iframe＆＃34;在ID，svg和样式中，它不起作用。出于想法。我无法重命名该类并使其没有空格，因为这需要重命名javascript中的所有引用。
答案 0 :(得分：0)
试试这个：
在SVG文件中稍后移动 <g id="Elements">..</g>，然后像你一样完成所有操作，并将课程放在a elemenets上，这是我猜（更好）（$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
afterShow: function() {
$('<div class="expander"></div>').appendTo(this.inner).click(function() {
$(document).toggleFullScreen();
});
},
afterClose: function() {
$(document).fullScreen(false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css" rel="stylesheet"/>
<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 1993.4 1123.4" style="enable-background:new 0 0 1993.4 1123.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#9B94C8;fill-opacity:0.62;stroke:#4A3F99;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;}
.st2{fill:#F15A29;fill-opacity:0.59;stroke:#D91F12;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#7B748A;stroke-width:0.75;stroke-miterlimit:10;}
.st4{fill:#F1F2F2;}
.st5{font-family:'Georgia';}
.st6{font-size:52px;}
.st7{fill:none;}
.st8{font-family:'TimesNewRomanPSMT';}
.st9{font-size:19px;}
.st10{font-size:21px;}
.st11{font-size:12px;}
</style>
<g class="fancybox fancybox.iframe" id="Layer_1_1_">
</g>
<g id="Name">
<rect x="61.6" y="145.3" class="st7" width="68.9" height="44.4"></rect>
<text transform="matrix(1 0 0 1 61.6089 161.1328)" class="st8 st9">Водород</text>
</g><g id="Squares">
<a href="elements/H.php" class="fancybox iframe st0"><rect x="48.9" y="84.3" class="st0 fancybox fancybox.iframe" width="96.3" height="96.3"></rect></a>
<rect x="1751" y="84.3" class="st1" width="96.4" height="96.3"></rect>
<a href="elements/Li.php"><rect x="47.6" y="184.5" class="st2" width="96.3" height="96.3"></rect></a>
<rect x="149" y="184.5" class="st3" width="96.4" height="96.3"></rect>
<rect x="1250.4" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="184.5" class="st1" width="96.4" height="96.3"></rect>
<rect x="47.6" y="284.6" class="st2" width="96.3" height="96.3"></rect>
<rect x="149" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1250.4" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="284.6" class="st1" width="96.4" height="96.3"></rect>
<rect x="47.6" y="384.7" class="st2" width="96.3" height="96.3"></rect>
<rect x="149" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="249.2" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="349.3" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="449.4" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="549.5" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="649.7" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="749.8" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="849.9" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="950" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="1050.2" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="1150.3" y="384.7" class="st1" width="96.3" height="96.3"></rect>
<rect x="1250.4" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="384.7" class="st1" width="96.4" height="96.3"></rect>
<rect x="47.6" y="484.8" class="st2" width="96.3" height="96.3"></rect>
<rect x="149" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="249.2" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="349.3" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="449.4" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="549.5" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="649.7" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="749.8" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="849.9" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="950" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="1050.2" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="1150.3" y="484.8" class="st1" width="96.3" height="96.3"></rect>
<rect x="1250.4" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="484.8" class="st1" width="96.4" height="96.3"></rect>
<rect x="47.6" y="584.9" class="st2" width="96.3" height="96.3"></rect>
<rect x="149" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="349.3" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="449.4" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="549.5" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="649.7" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="749.8" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="849.9" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="950" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="1050.2" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="1150.3" y="584.9" class="st1" width="96.3" height="96.3"></rect>
<rect x="1250.4" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="584.9" class="st1" width="96.4" height="96.3"></rect>
<rect x="47.6" y="685.1" class="st2" width="96.3" height="96.3"></rect>
<rect x="149" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="349.3" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="449.4" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="549.5" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="649.7" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="749.8" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="849.9" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="950" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="1050.2" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="1150.3" y="685.1" class="st1" width="96.3" height="96.3"></rect>
<rect x="1250.4" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="685.1" class="st1" width="96.4" height="96.3"></rect>
<rect x="349.3" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="449.4" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="549.5" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="649.7" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="749.8" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="849.9" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="950" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="1050.2" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="1150.3" y="835.2" class="st1" width="96.3" height="96.4"></rect>
<rect x="1250.4" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="1350.5" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="1450.6" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="1550.8" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="1650.9" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="1751" y="835.2" class="st1" width="96.4" height="96.4"></rect>
<rect x="349.3" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="449.4" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="549.5" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="649.7" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="749.8" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="849.9" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="950" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="1050.2" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="1150.3" y="935.4" class="st1" width="96.3" height="96.3"></rect>
<rect x="1250.4" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="1350.5" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="1450.6" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="1550.8" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="1650.9" y="935.4" class="st1" width="96.4" height="96.3"></rect>
<rect x="1751" y="935.4" class="st1" width="96.4" height="96.3"></rect>
</g>
<g id="Elements">
<text transform="matrix(1 0 0 1 76.6934 145.5522)" class="st4 st5 st6">H</text>
<text transform="matrix(1 0 0 1 73.3599 244.2189)" class="st5 st6">Li</text>
<text transform="matrix(1 0 0 1 65.0267 343.8855)" class="st5 st6">Na</text>
<text transform="matrix(1 0 0 1 78.6932 441.2191)" class="st5 st6">K</text>
<text transform="matrix(1 0 0 1 65.0266 545.2189)" class="st5 st6">Rb</text>
<text transform="matrix(1 0 0 1 67.6932 641.5522)" class="st5 st6">Cs</text>
<text transform="matrix(1 0 0 1 73.3601 737.2295)" class="st5 st6">Fr</text>
</g>
<g id="Number">
<text transform="matrix(1 0 0 1 54.5679 103.6328)" class="st8 st10">1</text>
</g>
<g id="Atomic_x5F_masses">
<text transform="matrix(1 0 0 1 110.8589 98.1328)" class="st8 st11">1.008</text>
</g>
</svg>
答案 1 :(得分：0)
让我们说你有这样的文件树
-index.html
-css
--Your .css files
-js
--Your .js files
-elements
--Your element.php pages
为什么不让你的rect文件显示一个加载你的php页面的隐藏div？
<a href="#" id="H" class="fancybox iframe st0 loader"><rect x="48.9" y="84.3" class="st0 fancybox fancybox.iframe" width="96.3" height="96.3"></rect></a>
锚标签将具有它所呈现的元素的id，在这种情况下，是H. 所以现在你可以添加一个可以加载页面的div
<div class="hidden" style="position: fixed; z-index: 1000; width:100%; height: 100%; visibility: hidden;">
<div class="page"></div>
</div>
你的jQuery看起来像这样。
$(document).ready(function(){
$(".loader").click(function(){
var id = $(this).attr('id')
$(".hidden").show(function(){
$(".page").load("path/to/"+id+".php");
});
});
})