使用svg画两个长方形中间用箭头线连接
时间: 2024-03-08 15:48:33 浏览: 13
可以使用以下 SVG 代码来画两个长方形中间用箭头线连接:
```
<svg viewBox="0 0 200 100">
<!-- 第一个长方形 -->
<rect x="20" y="20" width="60" height="60" fill="#f00" />
<!-- 第二个长方形 -->
<rect x="120" y="20" width="60" height="60" fill="#0f0" />
<!-- 箭头线 -->
<line x1="80" y1="50" x2="120" y2="50" stroke="#00f" stroke-width="2" marker-end="url(#arrow)" />
<!-- 定义箭头 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,10 L8,5 z" fill="#00f" />
</marker>
</defs>
</svg>
```
其中,`viewBox` 属性指定了 SVG 的视口大小和位置。`rect` 元素用来创建长方形,`x` 和 `y` 属性指定了长方形的位置,`width` 和 `height` 属性指定了长方形的大小,`fill` 属性指定了长方形的填充颜色。`line` 元素用来创建线条,`x1` 和 `y1` 属性指定了线条的起点坐标,`x2` 和 `y2` 属性指定了线条的终点坐标,`stroke` 属性指定了线条的颜色,`stroke-width` 属性指定了线条的宽度,`marker-end` 属性指定了箭头的位置和方向。`defs` 元素用来定义箭头,`marker` 元素用来创建箭头的形状,`id` 属性指定了箭头的名称,`markerWidth` 和 `markerHeight` 属性指定了箭头的大小,`refX` 和 `refY` 属性指定了箭头的位置,`orient` 属性指定了箭头的方向,`markerUnits` 属性指定了箭头的大小单位,`path` 元素用来创建箭头的路径,`d` 属性指定了箭头的形状。