svg-with-outline-ref.html (1237B)
1 <!doctype html> 2 <html> 3 <title>CSS outline (ref)</title> 4 <link rel="stylesheet" href="/fonts/ahem.css"/> 5 6 <style> 7 body { margin: 0; padding: 0; } 8 </style> 9 10 <svg height=500> 11 <rect x="8" y="8" width="24" height="24" fill="blue"/> 12 <rect x="10" y="10" width="20" height="20" fill="green"/> 13 14 <rect x="7.5" y="47.5" width="25" height="25" fill="none" stroke="blue"/> 15 <rect x="10" y="50" width="20" height="20" fill="green"/> 16 17 <text id="text" font-family="Ahem" font-size="100px" x="10" y="200">X</text> 18 19 <script> 20 const floatBounds = text.getBBox(); 21 const bounds = { 22 x : Math.round(floatBounds.x), 23 y : Math.round(floatBounds.y), 24 width : Math.round(floatBounds.width), 25 height : Math.round(floatBounds.height) 26 }; 27 28 29 const outline = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 30 outline.setAttribute("x", bounds.x - 1); 31 outline.setAttribute("y", bounds.y - 1); 32 outline.setAttribute("width", bounds.width + 2); 33 outline.setAttribute("height", bounds.height + 2); 34 outline.setAttribute("fill", "none"); 35 outline.setAttribute("stroke", "blue"); 36 outline.setAttribute("stroke-width", "2"); 37 38 text.parentNode.insertBefore(outline, text); 39 </script> 40 </svg>