我想根据http://www.paulrhayes.com/2011-03/css-modal/实现一个模态框单击 SVG 文档中的元素时打开。
这是一个示例代码:
<svg ...>
<g id="ra">
<a xlink:href="#r1" class="openModal">
<g id="r">
<rect x="136.63" y="98.893" fill="#000000" width="58.79" height="91.313"/>
</g>
</a>
</g>
</svg>
<aside id="r1" class="modal">
<div>
<h2>Modal box</h2>
<p>Lorem Ipsum</p>
<a href="#close" title="Close">Close</a>
</div>
</aside>
好吧，正如您所猜到的。此代码无效。也许你能帮忙？ 非常感谢。
最佳答案
你是不是忘了包含 css？一旦你这样做，它对我有用。
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="http://www.paulrhayes.com/experiments/modal/css/experiment.css"/>
<svg>
<a xlink:href="#r1" class="openModal">
<g id="r">
<rect x="136.63" y="98.893" fill="#000000" width="58.79" height="91.313"/>
</g>
</a>
</g>
</svg>
<aside id="r1" class="modal">
<div>
<h2>Modal box</h2>
<p>Lorem Ipsum</p>
<a href="#close" title="Close">Close</a>
</div>
</aside>
</html>
关于css - 从 SVG 文档中的链接打开 CSS 模态框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9064939/