Add border around svg sitemap-CodePudding

What do i have to do to get a border around my sitemap? I have made a sitemap and i'd like to add a border around the elements just to give it a bit more character and less bland.

<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>

CodePudding user response：

you can wrap your svg with a div tag and give it a border with CSS

<div class='myClassName'>
 <SVG/>
<div>

then on your CSS

.myClassName {
border: 2px solid black;
}

CodePudding user response：

I'm not sure what you're really looking for but I hope this answers your question. Simply apply border style to the svg. like so:

/* 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>