files/zh-cn/web/svg/linking/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: Linking
slug: Web/SVG/Linking
translation_of: Web/SVG/Linking
---
<div>SVG标签内的"a"元素上的“target”属性在Mozilla Firefox 1.5中不起作用。使用标记将SVG文档嵌入父HTML文档时：</div>

<p>page1.html:</p>

<pre class="brush: html;">&lt;html&gt;
  &lt;body&gt;
    &lt;p&gt;This is a SVG button:&lt;/p&gt;
    &lt;object width="100" height="50" type="image/svg+xml" data="button.svg"/&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>button.svg:</p>

<pre class="brush: xml">&lt;?xml version="1.1" encoding="UTF-8"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;a xlink:href="page2.html" target="_top"&gt;
    &lt;g&gt;
      &lt;!-- button graphical elements here --&gt;
    &lt;/g&gt;
  &lt;/a&gt;
&lt;/svg&gt;
</pre>

<p>规范规定，当单击按钮图形时，浏览器应导航到HTML document page2.HTML。但是，target不能与Mozilla在Firefox 1.5中实现的SVG&lt;a&gt;元素协同工作。（问题将在Firefox2.0中解决。）</p>

<p>无论如何，Moz SVG中的结果行为是page2.html将被加载到SVG按钮所在的帧中（即，您现在将page2.html嵌入到page1.html中的100x50像素帧中）。</p>

<p>要解决这个问题，需要一点难看的JavaScript编程：</p>

<p>button.svg:</p>

<pre class="brush: xml;">&lt;?xml version="1.1" encoding="UTF-8"?&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;g onclick="top.document.href='page2.html'" cursor="pointer"&gt;
    &lt;!-- button graphical elements here --&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre>

<h2 id="例子">例子</h2>

<p>有关此解决方案在工作中的示例，请参见www.codedeard.com。</p>