前端绘图基础——SVG详解

一、SVG 中 <defs> 元素详解

1. <defs> 是什么？

在 SVG（Scalable Vector Graphics）中，<defs> 是一个容器元素，用于存储可能会在文档其他地方重复引用的图形元素、样式、滤镜、渐变、图案等。

• 作用： 定义可复用内容，但不直接呈现在 SVG 渲染中。
• 常见用途： marker、linearGradient、clipPath、pattern、symbol 等元素通常写在 <defs> 中，然后通过 id 被其他元素引用。

2. 常见被定义内容举例

• 标记（marker）：箭头或路径终点标记。
• 渐变（gradient）：线性或径向渐变。
• 图案（pattern）：可重复填充图形的图案。
• 滤镜（filter）：例如模糊、阴影、颜色变化等。
• 裁剪路径（clipPath）：定义裁剪区域。
• 符号（symbol）：可重复引用的图形。

---

二、SVG 基本组成详解

1. SVG 文件结构

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs> <!-- 定义资源 --><!-- 渐变、图案、marker等 --></defs><!-- 使用 defs 中定义的资源 --><circle cx="50" cy="50" r="40" fill="url(#myGradient)" />
</svg>

2. 关键组成部分

组成部分	说明
<svg>	根容器，必须声明 xmlns 属性
<defs>	定义复用资源，不直接渲染
<g>	分组元素，可统一设置样式或变换
<path>, <circle>, <rect>, <line>, <polygon>	图形元素
<use>	引用 <symbol> 或其他带 id 的定义
<style>	内嵌 CSS
<script>	可嵌入 JavaScript 脚本

---

三、代码示例详解

<defs ref="customSuccessDefs"><markerid="sequenceflow-end-white-success"viewBox="0 0 20 20"refX="11"refY="10"markerWidth="10"markerHeight="10"orient="auto"><pathclass="success-arrow"d="M 1 5 L 11 10 L 1 15 Z"style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"/></marker><markerid="conditional-flow-marker-white-success"viewBox="0 0 20 20"refX="-1"refY="10"markerWidth="10"markerHeight="10"orient="auto"><pathclass="success-conditional"d="M 0 10 L 8 6 L 16 10 L 8 14 Z"style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"/></marker>
</defs>

关键点解释：

• <marker> 元素： 定义可附加到路径末尾或开头的标记（如箭头、菱形等）。

  • id：用于被 <path> 或 <line> 的 marker-end、marker-start 属性引用。
  • viewBox：定义 marker 自身的坐标系统。
  • refX / refY：定义标记锚点，指定 marker 应该附着在路径上的哪一点。
  • markerWidth / markerHeight：标记显示区域的大小。
  • orient="auto"：使箭头根据路径方向自动旋转。

• <path> 元素：

  • d="M 1 5 L 11 10 L 1 15 Z"：画一个箭头形状（三角形）。

  • style：

    • stroke-width: 1px：边框宽度。
    • stroke-linecap: round：线条端点为圆形。
    • stroke-dasharray: 10000, 1：用于使边框看似实线。

• class="success-arrow"、success-conditional"： 用于附加 CSS 样式，比如颜色等。

实际用途：

这段 <defs> 通常用于流程图或 BPMN 图中，为不同类型的连接线添加末尾标志（如“成功”箭头或条件判断标记）。

例如这样使用：

<path d="M10 10 L100 100" marker-end="url(#sequenceflow-end-white-success)" />

---

总结：

• <defs> 用来定义可复用的图形资源，不直接绘制。
• <marker> 定义箭头或装饰，常用于路径两端。
• 示例中的两个 <marker> 分别定义了一个三角形箭头和一个菱形条件标记，用于流程图中表示成功和条件流。
  前：
  
  如需我帮你生成一个可运行的 SVG 示例展示效果，请告诉我。

```javascript<!-- 自定义箭头样式，用于成功状态下流程连线箭头 --><defs ref="customSuccessDefs"><marker id="sequenceflow-end-white-success" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto"><path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path></marker><marker id="conditional-flow-marker-white-success" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto"><path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path></marker></defs>addCustomDefs() {const canvas = this.bpmnViewer.get('canvas');const svg = canvas._svg;const customSuccessDefs = this.$refs.customSuccessDefs;const customFailDefs = this.$refs.customFailDefs;svg.appendChild(customSuccessDefs);svg.appendChild(customFailDefs);},

后：

顺序：三角形箭头

条件分支：条件流程标记箭头（不是普通尖头箭头），表示带有条件判断的流程连接线，条件判断符号

Additional Content

SVG常用defs详解

1. marker路径标记（箭头、符号）

📌 应用场景：

• BPMN、流程图、拓扑图中路径起点/终点箭头
• 线性关系、依赖关系可视化

✅ 示例：

<defs><marker id="arrowhead" markerWidth="10" markerHeight="7"refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="black"/></marker>
</defs>
<line x1="0" y1="0" x2="100" y2="100" stroke="black"marker-end="url(#arrowhead)" />

自定义不同状态样式
GraphicsFactory管理SVG容器

• 创建图形元素的 SVG 表现形式（如任务框、连线、事件图标等）
• 根据元素类型（任务、事件、连接线等）调用不同的绘图方法
• 在元素更新（如样式变化、位置变化）时负责重绘 SVG 图形
  
  CSS动态变量
  Vue动态绑定style对象、数组对象，class绑定classA:true,

$success-color: #4eb819;
$primary-color: #409EFF;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$cancel-color: #909399;.success.djs-connection {.djs-visual path {stroke: $success-color!important;marker-end: url(#sequenceflow-end-white-success)!important;}}.success.djs-connection.condition-expression {.djs-visual path {marker-start: url(#conditional-flow-marker-white-success)!important;}}.success.djs-shape {.djs-visual rect {stroke: $success-color!important;fill: $success-color!important;fill-opacity: 0.15!important;}.djs-visual polygon {stroke: $success-color!important;}.djs-visual path:nth-child(2) {stroke: $success-color!important;fill: $success-color!important;}.djs-visual circle {stroke: $success-color!important;fill: $success-color!important;fill-opacity: 0.15!important;}}