SVG 超链接 <a>

简介: SVG 超链接 <a>
  • 特性:
  • 可以添加到任意的图形上
  • xlink:href:指定连接地址
  • xlink:title:指定连接提示
  • target:指定打开目标
  • 案例
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <defs>
    <!-- 网格 -->
    <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <path fill="none" stroke="#f1f1f1" d="M 0 0 H 20 V 20"/>
    </pattern>
  </defs>
  <!-- 绘制网格 -->
  <rect width="600" height="400" fill="url(#grid)"/>
  <!-- 超链接 -->
  <a xlink:href="https://www.baidu.com" xlink:title="跳转百度" target="_blank">
    <text x="50"  y="50">百度</text>
  </a>
  <a xlink:href="https://www.baidu.com" xlink:title="跳转百度" target="_blank">
    <rect x="50" y="100" width="100" height="100" fill="red"/>
    <text x="60"  y="150" fill="green">点击正方形</text>
  </a>
</svg>


相关文章
|
6月前
|
Web App开发 前端开发 安全
CSS背景图和HTML的<img>标签怎么选?
CSS背景图和HTML的<img>标签怎么选?
|
2月前
将一个图片作为一个超链接
将一个图片作为一个超链接。
43 6
|
前端开发
HTML与CSS实现网页的超链接及美化
HTML与CSS实现网页的超链接及美化
216 0
HTML与CSS实现网页的超链接及美化
|
6月前
|
前端开发 JavaScript API
【HTML】SVG实现炫酷的描边动画
今天闲来无事,看到Antfu大佬的个性签名,觉得还是非常炫酷的,于是也想要搞一个自己的个性签名用来装饰自己的门面,不过由于手写的签名太丑了,遂放弃。于是尝试理解原理,深入研究此等密法,终于小有所成,发现原来是描边动画,于是记载如下,方便日后借鉴。
95 3
|
前端开发
【CSS】多个图片在同一行显示
【CSS】多个图片在同一行显示
199 0
|
前端开发
CSS超链接样式详解
这个“图片地址”是鼠标图片地址,其中鼠标图片后缀名一般都是“.cur”,我们可以使用一些小软件来制作 这个“属性值”一般只会用到3个,分别是default、pointer和text。
120 1
CSS超链接样式详解
|
前端开发
1、CSS中iconfont 彩色图标使用详解
1、CSS中iconfont 彩色图标使用详解
390 0
1、CSS中iconfont 彩色图标使用详解
|
移动开发 前端开发 HTML5
web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状
web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状
web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状
CSS3透明背景表单
在线演示 本地下载
1081 0