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>


相关文章
|
运维 Cloud Native 安全
阿里平台工程的发展历程与关键实践
什么是平台工程,怎么在企业内落地平台工程,云效负责人陈鑫在2023云栖大会上,结合云效过去在阿里内部十多年的经验和在各大企业的实践,给出了非常详细的解答。
3709 3
|
Web App开发 资源调度 JavaScript
去中心化的前端构建工具 — Vite
Vite旨在通过利用生态系统中的新进展来解决这些问题:浏览器中本地ES模块的可用性,以及用编译到本地语言编写的JavaScript工具的兴起。通过本教程中,你将从头开始构建自己的应用,分别使用 Vite-Cli 和 云开发平台
1239 0
去中心化的前端构建工具 — Vite
|
Java 项目管理 Maven
这你必须知道,如何上传自己的jar包到maven公共远程中央仓库
这你必须知道,如何上传自己的jar包到maven公共远程中央仓库
1266 0
|
消息中间件 安全 Kafka
Kafka启动后需要开放什么端口?
Kafka启动后需要开放什么端口?
3536 7
|
JSON 数据处理 数据安全/隐私保护
Ktor库的高级用法:代理服务器与JSON处理
Ktor库的高级用法:代理服务器与JSON处理
LabVIEW使用VI脚本向VI添加对象
LabVIEW使用VI脚本向VI添加对象
195 2
|
存储 Web App开发 编解码
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
1424 1
|
数据采集 机器学习/深度学习 前端开发
反爬虫措施
【8月更文挑战第12天】
918 3
|
安全 Android开发 数据安全/隐私保护
Android中的动态权限请求与最佳实践
【4月更文挑战第14天】 在现代安卓应用开发中,用户隐私和安全被赋予了前所未有的重要性。随着Android 6.0(API级别23)引入的运行时权限模型,开发者必须更加细致地处理权限请求,以确保应用功能的完整性同时不侵犯用户的隐私。本文将深入探讨如何在Android应用中实现动态权限请求,分析常见问题,并提供一系列最佳实践,以帮助开发者优雅地处理这一挑战。
625 5
|
数据库
FastAPI 学习之路(三十四)数据库多表操作
FastAPI 学习之路(三十四)数据库多表操作
FastAPI 学习之路(三十四)数据库多表操作