v157 · svg embedded content sizing

Interactive SVG focal-point cropper

Why load an SVG in <object> instead of <img>? Because <object> keeps the SVG's internal DOM scriptable via contentDocument. In Chrome 157, you can now crop and pan an <object> schematic using CSS object-fit: cover (or none) and object-position: X% Y% while directly querying and highlighting nodes inside its contentDocument.

Pan object-position & inspect live contentDocument SVG nodes

Select a subsystem preset or drag the X/Y focal sliders. The script updates object-position on the outer <object> element AND reaches into objectEl.contentDocument to highlight the selected SVG node and read its getBBox() coordinates.

Cropped <object> viewport (240×150)

Intrinsic SVG size is 360×220. Click a node inside the SVG or use the focal controls above.

Live objectEl.contentDocument node readout

Loading interactive SVG contentDocument...

code path

// Panning the  viewport with CSS while mutating its live SVG DOM:
function focusSubsystem(objectEl, nodeId, xPct, yPct) {
  objectEl.style.objectFit = "none";
  objectEl.style.objectPosition = `${xPct}% ${yPct}%`;

  const svgDoc = objectEl.contentDocument;
  for (const node of svgDoc.querySelectorAll("[data-subsystem]")) {
    const active = node.id === nodeId;
    node.setAttribute("stroke", active ? "crimson" : "black");
    node.setAttribute("stroke-width", active ? "4" : "2");
  }
}
  

  
see also