SVG.connectable.js 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01107/article/details/142608961

SVG.connectable.js 使用教程

svg.connectable.js :twisted_rightwards_arrows: A JavaScript library for connecting SVG things. 项目地址: https://gitcode.com/gh_mirrors/sv/svg.connectable.js

1. 项目介绍

SVG.connectable.js 是一个用于连接 SVG 元素的 JavaScript 库。它允许开发者轻松地在 SVG 图形之间创建连接线，适用于需要动态连接和交互的图形应用场景，如流程图、网络拓扑图等。

2. 项目快速启动

2.1 安装

你可以通过 CDN 直接引入 SVG.connectable.js，或者将其下载到本地项目中使用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script>

2.2 基本使用

以下是一个简单的示例，展示如何使用 SVG.connectable.js 连接两个 SVG 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Connectable Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.1/svg.connectable.min.js"></script>
</head>
<body>
    <div class="graph"></div>
    <script>
        var svg = new SVG(document.querySelector('.graph')).size('100%', 500);
        var links = svg.group();
        var markers = svg.group();
        var nodes = svg.group();

        var g1 = nodes.group().translate(300, 200).draggy();
        g1.circle(80).fill("#C2185B");

        var g2 = nodes.group().translate(100, 200).draggy();
        g2.circle(50).fill("#E91E63");

        g1.connectable({ container: links, markers: markers }, g2).setLineColor("#5D4037");
    </script>
</body>
</html>