- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有一个环绕的超链接和 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 中的所有引用。
最佳答案
试试这个:
移动<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>
关于javascript - 将多个类分配给单独的 svg 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47393640/
我有一个应用程序,它会抛出 GKSession 并在各种条件下(连接超时、 session 失败等)创建一个新的 GKSession。不过,我遇到了内存泄漏问题,并且有时会在重新连接几次循环后崩溃。
比如我在宿主代码中有一个浮点指针 float *p 是否可以确定他指向的内存类型(设备/主机)? 最佳答案 在 UVA system 中, 运行时 API 函数 cudaPointerGetAttri
我已将项目转换为 .Net 4.0 并且以下代码不起作用: typeof(RuntimeTypeHandle).GetMethod("Allocate", BindingFlags.Instance
当我声明 char ch = 'ab' 时,ch 只包含 'b',为什么它不存储 'a'? #include int main() { char ch = 'ab'; printf("%c"
我对 Disk Sector 和 Block 有疑问。扇区是一个单位,通常为 512 字节或 1k、2k、4k 等取决于硬件。文件系统 block 大小是一组扇区大小。 假设我正在存储一个 5KB 的
假设我有 8 个人和5000 个苹果。 我想将所有苹果分发给所有 8 个人,这样我就没有苹果了。 但每个人都应该得到不同数量 将它们全部分发出去的最佳方式是什么? 我是这样开始的: let peopl
我正在构建的网站顶部有一个搜索栏。与 Trello 或 Gmail 类似,我希望当用户按下“/”键时,他们的焦点就会转到该搜索框。 我的 JavaScript 看起来像这样: document.onk
我有一小段代码: if (PZ_APP.dom.isAnyDomElement($textInputs)){ $textInputs.on("focus", function(){
我观察到以下行为。 接受了两个属性变量。 @property (nonatomic, retain) NSString *stringOne; @property (nonatomic, assign
我正在解决这样的问题 - 实现一个计算由以下内容组成的表达式的函数以下操作数:“(”、“)”、“+”、“-”、“*”、“/”。中的每个数字表达式可能很大(与由字符串表示的一样大)1000 位)。 “/
我有一组主机和一组任务。 每个主机都有 cpu、mem 和任务容量,每个任务都有 cpu、mem 要求。 每个主机都属于一个延迟类别,并且可以与具有特定延迟值的其他主机通信。 每个任务可能需要以等于或
该程序的作用:从文件中读取一个包含 nrRows 行和 nrColomns 列的矩阵(二维数组)。矩阵的所有元素都是 [0,100) 之间的整数。程序必须重新排列矩阵内的所有元素,使每个元素等于其所在
世界!我有个问题。今天我尝试创建一个代码,它可以找到加泰罗尼亚语号码。但是在我的程序中可以是长数字。我找到了分子和分母。但我不能分割长数字!此外,只有标准库必须在此程序中使用。请帮帮我。这是我的代码
我确定我遗漏了一些明显的东西,但我想在 Objective C 中创建一个 NSInteger 指针的实例。 -(NSInteger*) getIntegerPointer{ NSInteger
这个问题在这里已经有了答案: Difference between self.ivar and ivar? (4 个答案) 关闭 9 年前。
我如何将 v[i] 分配给一系列整数(v 的类型是 vector )而无需最初填充 最佳答案 你的意思是将 std::vector 初始化为一系列整数? int i[] = {1, 2, 3, 4,
我想寻求分配方面的帮助....我把这个作业带到了学校......我必须编写程序来加载一个 G 矩阵和第二个 G 矩阵,并搜索第二个 G 矩阵以获取存在数第一个 G 矩阵的......但是,当我尝试运行
我必须管理资源。它基本上是一个唯一的编号,用于标识交换机中的第 2 层连接。可以有 16k 个这样的连接,因此每次用户希望配置连接时,他/她都需要分配一个唯一索引。同样,当用户希望删除连接时,资源(号
是否有任何通用的命名约定来区分已分配和未分配的字符串?我正在寻找的是希望类似于 us/s 来自 Making Wrong Code Look Wrong ,但我宁愿使用常见的东西也不愿自己动手。 最佳
我需要读取一个 .txt 文件并将文件中的每个单词分配到一个结构中,该结构从结构 vector 指向。我将在下面更好地解释。 感谢您的帮助。 我的程序只分配文件的第一个字... 我知道问题出在函数 i
我是一名优秀的程序员,十分优秀!