Skip to content

Latest commit

 

History

History
94 lines (67 loc) · 3.21 KB

23.SVG-a元素.md

File metadata and controls

94 lines (67 loc) · 3.21 KB
Raw

SVG a元素

SVG<a>元素用来在SVG图片中创建链接。SVG链接和HTML中的链接工作方式一样。下面是一些简单的例子：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html">
        <text x="10" y="20">/svg/index.html</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="new">
        <text x="10" y="40">/svg/index.html
         (xlink:show="new")</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="replace">
        <text x="10" y="60">/svg/index.html
         (xlink:show="replace")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_blank">
        <text x="10" y="80">m/svg/index.html
         (target="_blank")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_top">
        <text x="10" y="100">/svg/index.html
         (target="_top")</text>
    </a>

</svg>

最终图片如下：

/svg/index.html 
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/" xlink:show="new">
    <text x="10" y="40">/svg/index.html (xlink:show="new")</text>
</a>

<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/" xlink:show="replace">
    <text x="10" y="60">/svg/index.html (xlink:show="replace")</text>
</a>

<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/" target="_blank">
    <text x="10" y="80">/svg/index.html (target="_blank")</text>
</a>

<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/" target="_top">
    <text x="10" y="100">/svg/index.html (target="_top")</text>
</a>

你可以将<a>元素上的xlink:show属性设置为new或replace，来告诉浏览器是在新窗口中打开链接还是替换当前窗口。

注意：如果你使用replace并且在iframe中显示SVG图片，iframe将是链接的目标，而不是浏览器窗口。如果你想让浏览器窗口替代iframe，可以将target属性的值改为_top。

你也可以设置target属性告诉浏览器在指定的框架或指定的窗口中打开链接。这就像HTML中链接的target属性一样（至少在理论上）。注意浏览器以不同的方式解释target属性。有关详细信息，请参阅本页最后一节。

图形作链接

也可以使用图形作为链接。你只需要将你希望链接的SVG图形放在<a>和</a>标签之间。下面的例子使用长方形代替文本作为链接：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html" target="_top">
        <rect x="10" y="20" width="75" height="30"
                style="stroke: #333366; fill: #6666cc"/>
    </a>

</svg>

最终图片如下：

<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/" target="_top">
    <rect x="10" y="20" width="75" height="30" style="stroke: #333366; fill: #6666cc"></rect>
</a>