SVG Connectors
A Work in Progress — Last updated 8 November 2014
A proposal for SVG connectors.
Connectors Level 1
This proposal relies on a <point> element for defining "ports".
Simple Example
Connect two objects with default routing (straight line).
... ]]>
A simple example connecting two boxes using default routing.
Notes
- Points in shapes are defined relative to the un-transformed bounding box of the shape.
- Default routing is via straight lines.
- Direction of connector implied by order of points.
One could simulate the <rect><point/></rect> syntax by using a group but this would not be nearly as eligant.
Intermediate Point Example
Connect two objects with default routing via an intermediate point.
... ... ]]>
A simple example using straight lines to connect two boxes via an intermediate point.
Notes
- If an intermediate point is invalid, the routing is done as if that point wasn't in the list of 'points'.
Intermediate Point Example II
Connect two objects with default routing via two intermediate points defined relative to the connector endpoints (not bounding box).
... ... ]]>
A simple example using straight lines to connect two boxes via intermediate points defined relative to the connector endpoints.
Notes
- Moving the start point below the end point flips the coordinate sytem for the points defined inside the connector.
Specified Path Example
Connect two objects with manual path.
... ]]>
An example with a manually specified path.
Problem: Use with Symbols
The above works with by using the 'id' values of point elements. This doesn't work well with symbols which are refered to by multiple <use> elements. You need to be able to specify a specific point B of a symbol instance A. The CSS WG has suggested (TPAC 2014) the following syntax: url(#SymbolA) PortB.
... And Gate ]]>
An example using symbols. (Note: the circles are meant to show the ports in this example and not to indicate a NAND gate, etc.)
Connectors Level 2
Possible extensions:
Routing Method
Level 1 only supports connectors with straight line or with manual routings. Level 2 could provide some more sophisticated routing.
'routing' property'
- 'none': No routing done.
- 'line': Straight line (same as level 1).
- 'path': 'd' attribute.
- 'orthogonal': Orthoganal.
- ?
If a specified routing is not supported, the first fallback is 'path'. If no 'd' attribute is provided, the fallback is 'line'.
Ports
A series of points could be given, allowing the connector to chose the "best" port:
]]>
The connector could choose between #A and #B for the start and #C and #D for the end.
Connecting line segments with curves
'r' property
The radius of the curve with which straight lines are connected.
<connector> or <path>?
In reflecting a bit, it seems that the <path> element could be used for connectors. The "port" problem is solved by using the <point> element. Specifying a 'connector-path' would trigger automatic routing of type 'connector-type', over-riding the 'd' attribute. Directionality is handled by the order of the points in "connector-path". The 'r' attribute is also useful for plain paths (applies to connected straight segments).
... ... ]]>