zoukankan      html  css  js  c++  java
  • SVG添加链接(转载)

    转载地址:http://tech.techweb.com.cn/thread-258715-1-1.html

    最基本的交互形式是链接。在 SVG 中,通过一个 <a> 标签提供链接,这与 HTML 链接的方式几乎相同。将 <a> 标签与一个 xlink:href 属性结合使用便可以建立一个链接。在 <a>和 </a> 标签之间的所有内容都作为链接的一部分。清单1展示了一个例子,它有三个元素,设置为链接到三个不同的 URL。单击这里以在浏览器中查看它们。
    文本、矩形和多边形元素都有到不同页面的链接,这表明所有 SVG 元素 -- 不管是文本、圆还是不规则的多边形 -- 都可以作为一个链接。注意,如果将鼠标移动到这些元素上面,指针会相应地发生改变,表明这是一个链接。
    其功能与 HTML 中的 image map(或者 hotspot)基本上相同。不过,在 HMTL 中这会是一个很麻烦的过程,要用专门的软件在一个图像上手工绘制热点 -- 如果这个图像或者链接改变了,那么更新它们会非常麻烦。在 SVG 中,定义和维护链接则容易得多,这主要是因为链接可以随着 SVG 内容动态移动。

    <svg>
    <a href="http://www.w3.org//Graphics//SVG//Overview.htm8">
    <rect x="10" y="10" width="100" height="30" rx="10" ry="10"
    style="fill:lightgrey"/>
    <text x="30" y="30" font-size="12">Click here</text>
    </a>
    <a   href="http://www.ibm.com//developerworks/">
    <circle cx="100" cy="100" r="50" style="fill:grey"/>
    <text x="80" y="100" font-size="12">Or here</text>
    </a>
    <a href="http://www.ibm.com/" target="new">
    <polygon
    points="60 160,165 172,180 60,290 290,272 280,172 285,250 255"
    style="fill:dimgrey"/>
    <text x="160" y="200" font-size="12">Or even here</text>
    </a>
    </svg> 
    注意在多边形的  中使用的 target="_blank"属性。它指示查看程序在单击这个元素时打开一个新的浏览器窗口。

  • 相关阅读:
    C#调取java接口
    POS配置
    SQL 防止注入
    C# 判断是否是节假日
    java 判断日期是否是节假日
    生成验证码方法
    git 学习记录
    Linux学习篇(四)-Linux 文件管理命令详解
    Linux学习篇(三)-Linux操作系统及常用命令
    Linux学习篇(二)-软件包管理器、Yum 软件仓库
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/3587211.html
Copyright © 2011-2022 走看看