why are my links not showing up as boxes inside the SVG? is the rect not working?
http://lukesspot.com/indus_links/show_rack.php?id=1
Hi there lurtnowski,
- the code did not validate.
- the SVG rect values were overlapping with strange results.
- BootStrap interfered with the SVG
- there were other issues.
Here is a working example of your project…
<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="http://lukesspot.com/indus_links/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Rack Cabinet 1K</title>
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1 class="text-center">
Integrated Configuration Environment
</h1>
<h2 class="text-center text-danger">Admin Area</h2>
<div class="row justify-content-center">
<div class="col-2">
<h3>Cabinet 1K</h3>
<h3>Power Panel: 2</h3>
<h3>Circuit Breaker: 1</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="565"
width="300"
>
<defs>
<style>
rect {
fill:none;
stroke:black;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
text {
fill:black;
font-size:10px;
}
.slots {
stroke-dasharray:6,6;
}
a rect {
fill:#e3e3e3;
stroke:#000;
stroke-width:1;
}
a:hover rect {
fill: #768E99;
}
line {
stroke:#000;
stroke-width:2
}
line:hover {
stroke: #768E99;
}
.rack h4 {
color: black;
text-decoration:none;
}
.rack:hover h4 {
color:white;
}
</style>
</defs>
<rect x="20" y="11" width="160" height="551" class="cabinet"/>
<rect x="25" y="16" width="150" height="541" class="slots"/>
<a xlink:href="#" class="tooltip">
<rect x="25" y="505" width="150" height="53"/>
</a>
<a xlink:href="#" class="tooltip" >
<rect x="25" y="451" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="397" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="342" width="150" height="53"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="288" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="234" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="179" width="150" height="53"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="125" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="71" width="150" height="52"/>
</a>
<a xlink:href="#" class="tooltip">
<rect x="25" y="16" width="150" height="53"/>
</a>
<text x="185" y="550">1</text><text x="185" y="538">2</text>
<text x="185" y="526">3</text><text x="185" y="514">4</text>
<text x="185" y="502">5</text><text x="185" y="490">6</text>
<text x="185" y="478">7</text><text x="185" y="466">8</text>
<text x="185" y="454">9</text><text x="185" y="442">10</text>
<text x="185" y="430">11</text><text x="185" y="418">12</text>
<text x="185" y="406">13</text><text x="185" y="394">14</text>
<text x="185" y="382">15</text><text x="185" y="370">16</text>
<text x="185" y="358">17</text><text x="185" y="346">18</text>
<text x="185" y="334">19</text><text x="185" y="322">20</text>
<text x="185" y="310">21</text><text x="185" y="298">22</text>
<text x="185" y="286">23</text><text x="185" y="274">24</text>
<text x="185" y="262">25</text><text x="185" y="250">26</text>
<text x="185" y="238">27</text><text x="185" y="226">28</text>
<text x="185" y="214">29</text><text x="185" y="202">30</text>
<text x="185" y="190">31</text><text x="185" y="178">32</text>
<text x="185" y="166">33</text><text x="185" y="154">34</text>
<text x="185" y="142">35</text><text x="185" y="130">36</text>
<text x="185" y="118">37</text><text x="185" y="106">38</text>
<text x="185" y="94">39</text><text x="185" y="82">40</text>
<text x="185" y="70">41</text><text x="185" y="58">42</text>
<text x="185" y="46">43</text><text x="185" y="34">44</text>
<text x="185" y="22">45</text>
</svg>
<h4>Elevation: 47-A</h4>
</div>
</div>
</body>
</html>
coothead
2 Likes
thanks, is there a way ti have a SVG n a page that uses bootstrao) like an objectr tag or an iframe or embed?
Thanks…
Hi there lurtnowski,
I do not use or like “BootStrap”. 
Your page will work perfectly well without it…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Rack Cabinet 1K</title>
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/tooltipster.bundle.min.css" media="screen">
<link rel="stylesheet" href="css/tooltipster-sideTip-shadow.min.css" media="screen">
<style media="screen">
body {
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#page-container {
max-width: 62.5em;
margin: auto;
text-align: center;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
h1 {
line-height: 1em;
font-size: 2.5em;
}
h2 {
line-height: 1em;
font-size: 2em;
color: #f00;
}
</style>
</head>
<body>
<div id="page-container">
<h1>
Integrated Configuration Environment
</h1>
<h2>Admin Area</h2>
<h3>Cabinet 1K</h3>
<h3>Power Panel: 2</h3>
<h3>Circuit Breaker: 1</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
height="565"
width="214"
>
<defs>
<style>
rect {
fill:none;
stroke:black;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
text {
fill:black;
font-size:10px;
}
.slots {
stroke-dasharray:6,6;
}
.rack {
fill:#e3e3e3;
stroke:#000;
stroke-width:1;
}
.rack:hover {
fill: #768E99;
}
line {
stroke:#000;
stroke-width:2
}
line:hover {
stroke: #768E99;
}
.rack h4 {
color: black;
text-decoration:none;
}
.rack:hover h4 {
color:white;
}
</style>
</defs>
<rect x="20" y="11" width="160" height="551" class="cabinet" />
<rect x="25" y="16" width="150" height="541" class="slots" />
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="508" width="150" height="48" class="rack" />
</a>
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="460" width="150" height="48" class="rack" />
</a>
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="412" width="150" height="48" class="rack" />
</a>
<a href="#" class="tooltip rack" title="A Panel">
<rect x="25" y="400" width="150" height="12" class="rack" />
</a>
<a href="#" class="tooltip rack" title="MTRX RIU 32<br>RIU 08 BLK DCE">
<rect x="25" y="364" width="150" height="36" class="rack" />
</a>
<a href="#" class="tooltip rack" title="A Panel">
<rect x="25" y="352" width="150" height="12" class="rack" />
</a>
<a href="#" class="tooltip rack" title="Slide Shelf">
<rect x="25" y="340" width="150" height="12" class="rack" />
</a>
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="112" width="150" height="48" class="rack" />
</a>
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="64" width="150" height="48" class="rack" />
</a>
<a href="#" class="tooltip rack" title="D Panel">
<rect x="25" y="16" width="150" height="48" class="rack" />
</a>
<text x="185" y="550">1</text><text x="185" y="538">2</text><text x="185" y="526">3</text>
<text x="185" y="514">4</text><text x="185" y="502">5</text><text x="185" y="490">6</text>
<text x="185" y="478">7</text><text x="185" y="466">8</text><text x="185" y="454">9</text>
<text x="185" y="442">10</text><text x="185" y="430">11</text><text x="185" y="418">12</text>
<text x="185" y="406">13</text><text x="185" y="394">14</text><text x="185" y="382">15</text>
<text x="185" y="370">16</text><text x="185" y="358">17</text><text x="185" y="346">18</text>
<text x="185" y="334">19</text><text x="185" y="322">20</text><text x="185" y="310">21</text>
<text x="185" y="298">22</text><text x="185" y="286">23</text><text x="185" y="274">24</text>
<text x="185" y="262">25</text><text x="185" y="250">26</text><text x="185" y="238">27</text>
<text x="185" y="226">28</text><text x="185" y="214">29</text><text x="185" y="202">30</text>
<text x="185" y="190">31</text><text x="185" y="178">32</text><text x="185" y="166">33</text>
<text x="185" y="154">34</text><text x="185" y="142">35</text><text x="185" y="130">36</text>
<text x="185" y="118">37</text><text x="185" y="106">38</text><text x="185" y="94">39</text>
<text x="185" y="82">40</text><text x="185" y="70">41</text><text x="185" y="58">42</text>
<text x="185" y="46">43</text><text x="185" y="34">44</text><text x="185" y="22">45</text>
</svg>
<h3>Elevation: 47-A</h3>
<!-- #page-container --></div>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="js/tooltipster.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
theme: 'tooltipster-shadow'
}); });
</script>
</body>
</html>
cootheaed
1 Like
The problem is that you gave the links a class of tooltip which is a bootstrap utility for coding tooltips and as such starts as opacity:0 (which means you can’t see them).
Remove the tooltip class and your links will work.
As I said in your other thread if you are going to use bootstrap then you must follow all the rules and learn how it works and what classes you can use etc 
You have made the same mistake in this page as in your other thread where you have used .row as a page wrapper and that instantly gives you horizontal scrollbars (which you never ever want). A row can only be nested inside a container. Nested rows can only be contained in column classes. The documentation is pretty clear on this and has been the case since bootstrap’s inception.
I’m afraid I don’t like bootstrap either as it always seems to get in the way of what you want to do. I can see it may be useful for a team who are not that skilled at coding or want a unified system but small sites can do very well without it.
4 Likes
oh,ill get rid of the horizontal scrollbar thing. Also, I really only like bootstrap for its grid system
Thanks for the explanations though, the community here is so good and always help me to get ion the right track.
One more thing, since im using tooltipster (which makes you choose a title for each link) it that ok if it prevents it from validating?
Sorry I’m afraid I don’t know anything about tooltipster but I would assume it will produce valid code.
I did see this on their site which relates you your original issue.
Note: if you use Twitter’s Bootstrap, use another class name because ‘tooltip’ will create a conflict.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.