I have a Table of Contents (toc) for which there is a th header I want to have a mitred effect on its 4 groove corners . . . and on the rest of the table as well. I figured out that I could achieve this effect by removing its border-collapse: collapse property. There is just one problem: I can’t get the mitres on everything hanging below the header without duplicating another table.
It’s complicated because I already have 2 tables in place to achieve a second color hue on the nth child striping.
The closest I have been able to get is to 1) trade in the th header for its own table, 2) stack the (now 2nd and 3rd) remaining tables below the lead 1st table with groove borders on the left and right sides . . . and 3) settle for the loss of the bottom border’s mitred corners because I couldn’t give it a 4th side.
WHAT A DRAMA! You’ll see the challenge when you open the page code for the toc, below.
SUMMARIZED
I can’t get that bottom-most margin to mitre.
I wish the original developers of the earliest world wide web (yes, I am that old lol) would have anticipated this contingency by extending the table header’s mitred corners to the 3 corners of the rest of the table but apparently they didn’t.
So the code below fails that bottom margin and i don’t know how to give it mitred borders because it only has >>3 sides.
If anyone has a workaround I’d be eternally grateful. I apologize for being verbose but I have no easy way to summarize the issue. Thank you anyone who can help me get the bottom margin mitred!
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>TABLE OF CONTENTS ᰄ semicodin</title>
<style>
body {
width: 1080px;
background-color: black;
margin: 0;
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
#counter {
text-align: center;
position: absolute;
bottom: 0;
max-width: 100%;
}
.ssz1 {
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round';
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
color: #ebf6ff;
/* PALE BLUE */
}
.ssz2 {
text-align: center;
margin-bottom: 1.75rem;
font-family: 'crete round';
font-size: 1.75rem;
line-height: 2rem;
font-weight: bold;
color: #ebf6ff;
/* PALE BLUE */
}
.henpen {
text-align: center;
color: #ffffee;
/* ivory */
margin: 2.5rem 16% 0rem 16%;
font-size: 3.75rem;
line-height: 3.88;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
.thanks {
margin: 2.5rem 15% 6.25rem 15%;
color: #ffffee;
/* ivory */
text-align: center;
font-style: italic;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.hilite {
margin: 0rem 3.38rem 0rem 3.38rem;
text-align: center;
font-style: italic;
color: black;
background-color: white;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
padding-top: .5rem;
padding-right: .8rem;
padding-bottom: .6rem;
padding-left: .8rem;
}
td {
padding-top: .5rem;
padding-right: .5rem;
padding-bottom: .6rem;
padding-left: .8rem;
}
.here {
color: #888888;
font-family: 'roboto slab', serif;
font-weight: 400;
font-size: 2.25rem;
line-height: 2.31rem;
}
/* ━━━━━━━━ TABLE 1 ━━━━━━━━ */
.table1 th {
border: 1.75rem groove #dab471;
/* mushrooms */
padding: .8rem;
width: auto;
color: #ffffee;
/* ivory */
text-align: center;
font-style: italic;
background-color: black;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
.group1 {
/* CLASS LETTER (A-E) */
width: 8%;
color: blue;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
}
.head1 {
width: 88%;
/* DESCRIPTION */
color: blue;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
}
.table1 {
border-left: 1.75rem groove #dab471;
/* shrooms */
border-right: 1.75rem groove #dab471;
/* shrooms */
width: auto;
margin: 2.25rem 9% 0rem 9%;
font-family: 'roboto slab', serif;
font-size: 2.25rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
.table1 tbody tr:nth-child(odd) {
background-color: white;
}
.table1 tbody tr:nth-child(even) {
background-color: #ebf6ff;
/* PALE BLUE */
}
.table1 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table1 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/* ━━━━━━━━ TABLE 2 ━━━━━━━━ */
.group2 {
/* CLASS LETTER (A-E) */
width: 8%;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
color: green;
}
.head2 {
width: 88%;
/* DESCRIPTION */
color: green;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
}
.table2 {
width: auto;
margin: 0rem 9% 1.25rem 9%;
border-bottom: 1.75rem groove #dab471;
/* mushrooms */
border-right: 1.75rem groove #dab471;
/* mushrooms */
border-left: 1.75rem groove #dab471;
/* mushrooms */
font-family: 'roboto slab', serif;
font-size: 2.25rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
.table2 tbody tr:nth-child(odd) {
background-color: white;
}
.table2 tbody tr:nth-child(even) {
background-color: #f3ffeb;
/* PALE GREEN */
}
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.ivory {
color: #ffffee;
text-align: center;
margin: 2.25rem 0rem 2.25rem 0rem;
}
.blu {
color: blue
}
.blub {
color: blue;
font-weight: bold;
}
.fusch {
color: #ca009b
}
.fuschb {
color: #ca009b;
font-weight: bold
}
.fuschi {
color: #ca009b;
font-style: italic
}
.crim {
color: crimson
}
.crimb {
color: crimson;
font-weight: bold
}
.crimi {
color: crimson;
font-style: italic
}
.grey {
color: grey
}
.green {
color: #248900
}
/* green */
.greenb {
color: #248900;
font-weight: bold
}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
a:active {
color: crimson
}
a:hover {
color: crimson
}
a:link {
color: blue
}
a:visited {
color: blue
}
.redlink a:link {
color: crimson
}
.redlink a:visited {
color: crimson
}
.whlink a:link {
color: #ffffee
}
/* ivory */
.whlink a:visited {
color: #ffffee
}
/* ivory */
.bk1link a:link {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 2.31rem;
}
.bk1link a:visited {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 2.31rem;
}
.bk2link a:link {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bk2link a:visited {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bnlink a:link {
padding-bottom: 10px;
color: #dab471;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.bnlink a:visited {
padding-bottom: 10px;
color: #dab471;
/* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
.lead {
padding: .8rem;
width: auto;
color: black;
text-align: center;
font-style: italic;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
.ctr {
text-align: center
}
.undr {
text-decoration: underline
}
.clamwh {
color: #ffffee;
/* IVORY */
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: #ebf6ff;
/* PALE BLUE */
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambk {
color: black;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 5rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
/* ━━━━━ START SMOKE TAB ━━━━━ */
/* animated tab */
td.svg-header {
padding: 1rem .5rem 0;
background: white; /* #665e49 Dark Brown coordinayed w/border SAND #fff9e1; */
border-bottom: 7px solid #000;
border-top: 0px solid #000;
}
.svgtabs.onetab span {
--tab1-color: #fff;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.onetab a {
justify-content: center;
margin-right: 0;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.onetab svg {
width: 620px;
height: 75px;
top: 2px
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px .5rem 0;
font-weight: bold;
color: #000;
font-style: italic;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
}
#test {
height: 220px;
animation: tab 15s infinite
}
@keyframes tab {
0% {
height: 200px;
width: 260px;
}
50% {
height: 140px;
width: 180px;
}
100% {
height: 200px;
width: 260px
}
}
</style>
</head>
<body>
<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed and built for SmartPhones<span class="clamlbu">!</span></div>
<table class="table1">
<thead>
<tr>
<th colspan="2">
Table of Contents
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="group1">A.</td>
<td class="head1">PROJECTS</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a></span>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a></span>
</td>
</tr>
<tr>
<td></td>
<td>
Table of Contents <span class="here">(You Are Here)</span></td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank"><shape-outside: ellipse> 01</a></span>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank"><shape-outside: polygon> 01</a></span>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a></span>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Complex Business Letter Template</a></span> for 2 Addressees w/USPS P.O.D. Counter Roll Sticker Positions
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/h_thru_z/rem_conversion_chart.html" target="_blank">REM Conversion Chart</a></span> Flex w/nth Child
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a></span> & Horizontally Including Text w/Page Counter Footer
</td>
</tr>
<tr>
<td class="svg-header" colspan="2">
<div>
<div class="svgtabs onetab">
<a class="svgtab1" href="#">
<span>Tabs!</span>
<svg viewBox="0 0 164.042 15.843">
<clipPath id="shape">
<path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)"/>
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
<image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
</svg>
</a>
</div>
</td>
</tr>
<tr>
<td class="group1">B.</td>
<td class="head1">CSS — PARCHMENT w/BORDER</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1_ANI</a> / ANIMATED — Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR_ANI</a> / ANIMATED — Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3_ANI</a> / ANIMATED</a> Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> — Coming Soon!
</td>
</tr>
<tr>
<td class="group1">C.</td>
<td class="head1">CSS — SOLID w/BORDER</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2BDR</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3BDR</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7BDR</a> — Coming Soon!
</td>
</tr>
<tr>
<td class="group1">D.</td>
<td class="head1">CSS — SOLID <i>NO</i> BORDER</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3</a> — Coming Soon!
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7</a> — Coming Soon!
</td>
</tr>
</tbody>
</table>
<table class="table2">
<tbody>
<tr>
<td class="group2">E.</td>
<td class="head2">SVG — SOLID w/BORDER</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1BDR</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2BDR</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3BDR</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7BDR</a></span> — Coming Soon!</td>
</tr>
<tr>
<td class="group2">F.</td>
<td class="head2">SVG — SOLID <i>NO</i> BORDER</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7</a></span> — Coming Soon!</td>
</tr>
<tr>
<td class="group2">G.</td>
<td class="head2">SVG — PATTERN w/BORDER</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> — Coming!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> — Coming!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATTBDR</a></span> — Coming!</td>
</tr>
<tr>
<td class="group2">H.</td>
<td class="head2">SVG — PATTERN <i>NO</i> BORDER</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATT</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATT</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT</a></span> — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td><span class="bk1link">
<a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATT</a></span> — Coming Soon!<br> </td>
</tr>
</tbody>
</table>
<div class="ivory">
Got Questions? You can PM me at<br>
<span class="whlink">
<a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a></span><span class="clamwh">!</span>
<br>
<br>
</div>
<div class="thanks">
The author would like to thank Paul O’Brien and “snadyleiby” of the Sitepoint Forums for (EVERYTHING!) as well as the fine artists at Inkscape Forum for their valuable contribution in rendering
<div class="hilite">3 very clean masters of the tabs in SVG</div>
most especially “polygon” and “tyler”. You guys are the best! Until we meet again . . .
</div>
</body>
</html>
I specifically removed them because I don’t want them there. This is a link-centric page and I don’t want the rows to have borders.
I kept looking at the code. Walking away from it. Coming back to it. Well thank you for explaining a small piece of arcane Tables 101 technology. I’ll go make the corrections now . . .
How on earth do I plug it; it’s right in the middle of the SVG!