javascript - 将多个类分配给单独的 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 ,

Multiple class names must be separated by white space characters.

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

Answer 1

试试这个:

移动<g id="Elements">..</g>稍后在 SVG 文件中，然后像你一样做所有的事情，把类(class)放在 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>