Techniques For Dealing With Large Svg Images

I want to let the svg expand out fully beyond the viewport so none of the shapes are squashed together. I'll then add panning and zooming which I know how to do. But how can I let

Solution 1:

I think this is more than anything a design problem. One alternative solution to what you have would be to use some method to change the viewBox of your SVG and rotate the text to avoid overlapping, more or less like this. In this case I'm using an input type range to change the viewBox but you may decide to choose a different solution.

constSVG_NS = 'http://www.w3.org/2000/svg';
constSVG_XLINK = "http://www.w3.org/1999/xlink";

let A = -1200;
let B = 1200;

let hexArray = []

functiondrawHexagon(r){  
  let points = "";
   for( let i = 1; i <= 6; i++ ){
        let a = i * ( Math.PI / 3 );
        let x = (r * Math.cos( a - Math.PI/2 )).toFixed(3);
        let y = (r * Math.sin( a  - Math.PI/2)).toFixed(3);
        points += `${x},${y} `;
      }
  return points;
}

functionuseHex(theParent,pos){
   let use = document.createElementNS(SVG_NS, 'use');
   use.setAttributeNS(SVG_XLINK, 'xlink:href', '#theHex');
   use.setAttributeNS(null,"x",pos.x);
   use.setAttributeNS(null,"y",pos.y);
   //use.setAttribute("title",'x value:'+pos.x);
   theParent.appendChild(use);
   hexArray.push(use);
  
   drawText('x value:'+pos.x,pos)
}

functiondrawText(val,pos){
  let txt = document.createElementNS(SVG_NS, 'text');
  txt.setAttributeNS(null,"x",pos.x);
  txt.setAttributeNS(null,"y",pos.y);
  txt.textContent = val;
  txt.setAttributeNS(null,"transform",`translate(0,30) rotate(-75  ${pos.x},${pos.y})`);
  textParent.appendChild(txt);
}

functionconnector(parent,p){
  let path = document.createElementNS(SVG_NS, 'path');
  let d =`M${p.x},${p.y}C${p.x},125 0,125 0,0`;
  path.setAttributeNS(null,"d",d);
  parent.appendChild(path);
}

for(let x = A; x <= B; x+=50){
  let pos = {x:x,y:250}
  useHex(useParent,pos);
  connector(connectors,pos);
}



itr.addEventListener("input",()=>{
svg.setAttributeNS(null, "viewBox", `${itr.value} -50 1200 550`); 
});

svg {
  border: 1px solid;
}
use {
  fill: white;
  stroke: #000;
}

#itr {
  width: 500px;
  display: block;
  margin: 2em auto;
}

#connectors path {
  fill: none;
  stroke: black;
}

#tooltip {
  position: absolute;
}

text {
  dominant-baseline: middle;
  text-anchor: end;
}

<inputid="itr"type="range"min = "-1225"max = "25"value = "-600" /><svgid="svg"viewBox="-600 -50 1200 550"style="--display:block;"><defs><polygonid="theHex"points="21.651,-12.500 21.651,12.500 0.000,25.000 -21.651,12.500 -21.651,-12.500 -0.000,-25.000 "  ></polygon></defs><gid="connectors"></g><gid="useParent"><usexlink:href="#theHex"y="0"  /></g><gid="textParent"></g></svg>