JointJS零基础入门04-链接样式

最新推荐文章于 2024-05-10 17:09:09 发布

96QLY

最新推荐文章于 2024-05-10 17:09:09 发布

阅读量2.1k

点赞数 4

分类专栏： web前端 jointJS 文章标签： css JointJS svg 链接样式

本文链接：https://blog.csdn.net/u013411654/article/details/77482664

版权

本文详细介绍了如何使用 JointJS 创建和定制SVG链接样式，包括改变线条颜色、箭头填充、设置虚线等，同时展示了示例代码，帮助理解如何实现不同样式的链接。

摘要由CSDN通过智能技术生成

4.1 SVG

当我们知道如何设计元素时，我们来看看如何设置链接。再次，我们需要知道链接的SVG结构，然后使用外部CSS，链接的SVG结构如下：

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

<g class="joint-theme-default joint-cell joint-type-link joint-link" id="j_1" model-id="3856002c-38e2-4f15-b8e5-e2649d580ad2" data-type="link">
    <path xmlns="http://www.w3.org/2000/svg" class="connection" id="v-9" stroke="blue" d="M 20 20 L 240 20" />
    <path xmlns="http://www.w3.org/2000/svg" class="marker-source" id="v-10" fill="red" stroke="black" transform="translate(10 15) scale(1) rotate(0)" d="M 10 0 L 0 5 L 10 10 Z" />  
    <path xmlns="http://www.w3.org/2000/svg" class="marker-target" id="v-11" fill="yellow" stroke="black" transform="translate(250 25) scale(1) rotate(-180)" d="M 10 0 L 0 5 L 10 10 Z" />
    <path xmlns="http://www.w3.org/2000/svg" class="connection-wrap" d="M 20 20 L 240 20" />
    <g xmlns="http://www.w3.org/2000/svg" class="labels