¿Qué tengo que hacer para poner un borde alrededor de mi mapa del sitio? Hice un mapa del sitio y me gustaría agregar un borde alrededor de los elementos solo para darle un poco más de carácter y menos soso.
<style> #svgJS g:hover polyline, #svgJS g:hover line { fill: none; stroke-width: 2; stroke: black; } #svgJS g:hover g text, #svgJS g:hover text { font-weight: bold; } #svgJS g:hover polygon, #svgJS g:hover rect, #svgJS g:focus polygon, #svgJS g:focus rect { fill: pink; stroke: blue; stroke-width: 2; } h1 { font-family: sans-serif; <!--text-align: centre;--> } a { text-decoration: none; } a:link, a:visited { color: #0000FF; } a:hover { color: grey; } a: .container { margin: auto; } header { position: sticky; top: 0; } </style> <svg style="text-align:center" id="svgJS" height="1920" width="1280"> <g id="GROUPONE"> <rect x="375" y="10" height="50" width="150" stroke="#0000FF" fill="none" stroke-width="2" /> <text fill="#000" font-size="14" x="450" y="41" font-family="Sans-Serif" text-anchor="middle"> Main Page</text> </g> <g id="groupId2"> <line id="shapeId2" stroke="#0000FF" stroke-width="2" x1="450" y1="60" x2="450" y2="110"></line> <polyline points="455, 105 450, 110 445, 105" stroke="#0000FF" stroke-width="2" fill="none" /> </g> <g id="groupId3" > <rect x="375" y="110" height="50" width="150" stroke="#0000FF" fill="none" stroke-width="2" /> <text fill="#000" font-size="14" x="450" y="141" font-family="Sans-Serif" text-anchor="middle"> Query form</text></g>puedes envolver tu svg con una etiqueta div y darle un borde con CSS
<div class='myClassName'> <SVG/> <div>luego en tu CSS
.myClassName { border: 2px solid black; }No estoy seguro de lo que realmente estás buscando, pero espero que esto responda a tu pregunta. Simplemente aplique el estilo de borde al svg . al igual que:
/* ADDED THIS LINE */ svg { border: 1px solid #ff0000 } #svgJS g:hover polyline, #svgJS g:hover line { fill: none; stroke-width: 2; stroke: black; } #svgJS g:hover g text, #svgJS g:hover text { font-weight: bold; } #svgJS g:hover polygon, #svgJS g:hover rect, #svgJS g:focus polygon, #svgJS g:focus rect { fill: pink; stroke: blue; stroke-width: 2; } h1 { font-family: sans-serif; <!--text-align: centre; --> } a { text-decoration: none; } a:link, a:visited { color: #0000FF; } a:hover { color: grey; } a: .container { margin: auto; } header { position: sticky; top: 0; } <svg style="text-align:center" id="svgJS" height="1920" width="1280"> <g id="GROUPONE"> <rect x="375" y="10" height="50" width="150" stroke="#0000FF" fill="none" stroke-width="2" /> <text fill="#000" font-size="14" x="450" y="41" font-family="Sans-Serif" text-anchor="middle"> Main Page</text> </g> <g id="groupId2"> <line id="shapeId2" stroke="#0000FF" stroke-width="2" x1="450" y1="60" x2="450" y2="110"></line> <polyline points="455, 105 450, 110 445, 105" stroke="#0000FF" stroke-width="2" fill="none" /> </g> <g id="groupId3" > <rect x="375" y="110" height="50" width="150" stroke="#0000FF" fill="none" stroke-width="2" /> <text fill="#000" font-size="14" x="450" y="141" font-family="Sans-Serif" text-anchor="middle"> Query form</text></g>