在svg网站地图周围添加边框

Question

我该怎么做才能在我的网站地图周围获得边界？我制作了一个网站地图，我想在元素周围添加一个边框，让它更有个性，不那么乏味。

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

Answer 1

您可以用div标签包装svg，并用CSS 为其提供边界

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

然后在你的CSS 上

.myClassName {
border: 2px solid black;
}

Answer 2

我不确定你到底在寻找什么，但我希望这能回答你的问题。只需将边框样式应用于svg。像这样：

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