SVG a元素

时间:2020-01-09 10:44:23  来源:igfitidea点击:

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 /svg/index.html(xlink:show =" new")/svg/index.html(xlink:show =" replace")/svg/index.html(target =" _ blank")/ svg / index.html(target =" _ top")

我们可以将<a>元素上的xlink:show属性设置为new或者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>