Line Connection
OK! Time to actually learn the hard stuff. Apparently connecting 2 points together is a whole process. But once I turn it into a function, it will be easy!
Drawing a line between 2 elements in a table.
My plan for how I'll use this: I want to connect images together to show relationships between different pages on my site. As place holder images, lets use Jael and Goni from Scott Killian's book Steller Heir
 |
|
 |
Behind the scenes
The images are positioned using a table. I'll make the table visible here so you can see it.
|
|
|
Also, here's a css property to learn:
- table-layout: fixed;
- This helps the table columns all stay the same size
STYLE
<style>
.circle-node {
width: 100%;
border: 4px solid white;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 1;
aspect-ratio: 1/1;
}
.invisible-table {
width: 100%;
border: none;
table-layout: fixed;
}
</style>
HTML
<!-- Parent container must be "positioned". --> <div style="position: relative"> <!-- The line gets drawn inside this container --> <svg id="drawing-area"></svg> <table class="invisible-table"> <tr> <td><img id="jael" src="jael.png"></td> <td></td> </tr> <tr> <td></td> <td><img id="goni" src="goni.png"></td> </tr> </table> </div>
Javascript (scrollable window)
<script src="/js/drawLineBetween.js"></script>
<script>
runAfterPageIsLoaded(drawEverything);
function drawEverything() {
// Put all your drawLineBetween functions here
drawLineBetween(
'drawing-area', // The ID of the svg container
'jael', // ID tag of first element
'goni', // ID tag of second element
'red', // Color of the line
10, // Thickness of the line
-1 // Optional z-index of line
);
}
</script>
Look what happens when you don't style {box-sizing: border-box;} for the images:
(For now, I'll make these borders thicker so you can notice the problem easier).
The images become off center, they're slightly to the right. Default border settings cause this. By default, borders are drawn on the outside of images, making the total size of img + border bigger than the cell.
|
|
|
To prevent this, {box-sizing: border-box;} draws the border on the inside of the image's bounding box, keeping the image size the same.
Shrink an image inside a node by 80%
Sometimes, a circle border cuts out too much of the picture. When this happens, I shrink the image by 80% inside of a div.
HTML
<table>
<tr>
<td>
<div class="node-for-tiny-image">
<img class="image-80percent">
</div>
</td>
</tr>
</table>
Style
<style>
.circle-node, .node-for-tiny-image {
width: 100%;
border: 4px solid white;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 1;
aspect-ratio: 1/1;
}
.image-80percent {
width: 80%;
aspect-ratio: 1/1;
display: block;
margin: auto;
}
</style>
Adding captions to nodes
It can be helpful to place a label under a node. I use absolute positioned labels so it doesn't mess up the flow. Remember to include some margin-bottom after the table, so that the last label doesn't over lap with the next content.
HTML
<table>
<tr>
<td>
<div style="position: relative">
put your image / div node here
<p class="node-text">
</div>
</td>
</tr>
</table>
Style
<style>
.node-text {
text-align: center;
color: white;
position: absolute;
background-color: black;
}
</style>