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>