分配多个类来分隔 svg 元素

Question

有一个超链接和 SVG 矩形元素

<a href="elements/H.php"><rect x="48.9" y="84.3" class="st0 fancybox fancybox.iframe" width="96.3" height="96.3"/></a>

我正在尝试将名为“fancybox fancybox.iframe”的第二个类应用于主要的一个类“st0”。第二个类应该在父页面上方的 iframe 窗口中打开超链接。正如here 所见，这是行不通的。我想要实现的一个工作示例是使用区域标签，并且是 here。

根据www.w3.org，

多个类名必须用空格字符分隔。

问题是类名中的空格？我尝试将 class="fancybox fancybox.iframe" 放入 ID、svg 和样式中，但它不起作用。没主意了。我无法重命名该类并使其没有空格，因为这需要重命名 javascript 中的所有引用。

Answer 1

假设你的文件树是这样的

-index.html
-css
  --Your .css files
-js
  --Your .js files
-elements
  --Your element.php pages

为什么不让你的 rect 文件显示一个隐藏的 div 来加载你的 php 页面？

<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");
    });
  });
})

Answer 2

试试这个：

在 SVG 文件中移动 <g id="Elements">..</g> 稍后，然后像你一样做所有事情，然后在 a 元素上放置类，我猜（语义上）这样会更好

$(".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>