and an svg path that follows the outline of an svg polygon - html

Question

I am trying to create a shape using an svg path that follows the outline of an svg polygon.
I need to set the d attribute of the svg path element because the size of the shape will be different depending on how much text there is in the <text /> element that is added to the document. I will have a number of these shapes but I'm just showing one here for brevity.
MY logic is to try and basically start at the middle, move down and right for 60 degrees, move back to the middle and move down left 60 degrees and then join up what is left of the box.
My shape is not quite right. There are a number of problems:
The shape is not in line with the point of the hexagon.
The lengths of each flat line or H that appears the diagonal line are not the same length.
There is a rogue line trying to join back to the point of the shape.
I need to add curves to the corners and I'm not sure how to do this.
const getPoint = ({
sides,
size,
center,
rotate,
side
}) => {
const degrees = (360 / sides) * side - rotate;
const radians = (Math.PI / 180) * degrees;
return {
x: center.x + size * Math.cos(radians),
y: center.y + size * Math.sin(radians)
};
};
const path = document.querySelector('path');
const gRef = document.querySelector('.hierarchy-label__container');
gRef.setAttribute('transform', 'translate(0, -40)');
const gbBox = gRef.getBBox();
let startingX = gbBox.x + gbBox.width / 2;
const startingY = gbBox.y + gbBox.height;
startingX = startingX - 0.7;
const [bottomRight, bottomLeft] = [1, 4].map((side) =>
getPoint({
sides: 6,
size: 30,
center: { x: startingX, y: startingY },
side,
rotate: 30
})
);
const bottomRightCoords = `${bottomRight.x} ${bottomRight.y}`;
path.setAttribute(
'd',
`M ${startingX} ${startingY} L ${bottomRightCoords} H ${gbBox.width} M ${startingX} ${startingY} L ${
bottomLeft.x
} ${bottomRight.y} H -${gbBox.width + 4} V -${gbBox.height} H ${gbBox.width} L ${gbBox.width} ${
bottomRight.y
} M ${startingX} ${startingY} Z`
);
.hierarchy-label__text {
fill: white;
text-anchor: middle;
font-size: 1.2rem;
}
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 990 759">
<g class="vx-group vx-cluster" transform="translate(100, 100)">
<g class="vx-group" transform="translate(0, 0)">
<g class="vx-group node-vertical__container" transform="translate(490, 0)">
<polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"></polygon>
<g class="vx-group node-vertical__business-unit" transform="translate(0, 0)">
<use xlink:href="#icon-BusinessUnit"></use>
</g>
<g class="hierarchy-label__container" transform="translate(0,-40)">
<text class="hierarchy-label__text" width="50" fill="white" x="0" y="0" text-anchor="middle" style="pointer-events: none;">
<tspan x="0" dy="0em">Finance</tspan>
</text>
<path></path>
</g>
</g>
</g>
</g>
</svg>

Answer 1

For the sake of clarity I've simplified a lot your code. Also: I've chosen to draw the hexagon in JavaScript in order to be able to use the hexagon vertices to draw the path where you put the text.
Please read code's comments
function drawHex(r){
// this function draws a hexagon with the center in 0,0
// and returns the array of points
// r is the radius of the circumscribed circle
let pointsRy = [];
let a = Math.PI/3;
for( let i = 0; i < 6; i++ ){
let aRad = (a*i) - Math.PI/2;
let Xp = parseFloat(r * Math.cos( aRad )).toFixed(3);
let Yp = parseFloat(r * Math.sin( aRad )).toFixed(3);
pointsRy.push({x:Xp,y:Yp,a:aRad});
}
// the points for the hexagon
let points = pointsRy.map(p => `${p.x}, ${p.y}`).join(" ");
hex.setAttributeNS(null,"points", points)
// the function returns the array of points
return pointsRy;
}
// ry: the array of points used to draw the hexagon: I'll be using the first & the second point to drae the textRect path
let ry = drawHex(30);
function drawTextPath(W,H){
// W: the width of the text "rectangle"
// H: the height of the text "rectangle"
// the textRect & the text art translated upwards (in y). Please see svg
let w = W/2 - (Number(ry[1].x) - Number(ry[0].x));
let d = `M${ry[0].x},${ry[0].y} L${ry[1].x},${ry[1].y} h${w} v-${H} h-${W} v${H} h${w}`;
textRect.setAttributeNS(null,"d",d)
}
drawTextPath(180,50)
svg{font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
text{fill:white; text-anchor:middle;pointer-events: none;}
<svg viewBox="-100 -70 200 200">
<polygon id="hex" />
<g transform="translate(0,-6)">
<path id="textRect" />
<text y="-40">
<tspan>Finance</tspan>
</text>
</g>
</svg>
Without any doubt there are other ways to draw this. Y hope you'll find my solution useful.