I like this pattern…
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="pattern_J61C8B" patternUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(46)">
<line x1="0" y="0" x2="0" y2="24" stroke="#ffcccb" stroke-width="30" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#pattern_J61C8B)" />
</svg>
I try to use it on the red rectangle, but
Check the failed 404 path local status . Try setting the path to a valid online URL.
would that be the source map error?
Perhaps, trying to debug from a screen dump is difficult 
<off-topic>
So is trying to put a 3 inch cubic box into a rack.
</off-topic>
Is there an element with ID pattern_J61C8B in your HTML?
You can do similar with a linear gradient if you want.
ok, heres the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="1800; url=../logout.php" />
<title>Add Asset to a rack</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link href='../css/select2.min.css' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="../css/jqeasytooltip.css" />
<script src="../scripts/jquery.js"></script>
<script src="../scripts/jqeasytooltip.v1.3.min.js"></script>
<style>
h5 {
margin:10px 0;
}
h3 {
margin:20px 0;
}
form .row {
margin-bottom: 20px;
}
.alert-dark {
background-color: #F5F5F5;
}
.tipthemewhite {margin:3em 0 0 1.1em;}
img.type {
margin-right:15px
display: inline-block;
width:40px;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
}
.alert-info .alert-heading {
margin-top:15px;
}
.alert-info .input-group-text {
background-color: #d1ecf1;
border: 1px solid #17a2b8;
}
.alert-info .form-control {
background-color: #ebfafd;
border: 1px solid #17a2b8;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-bottom:10px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="../index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/comms.php">Comms Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/crypto.php">Crypto Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/data.php">Data Center</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/server.php">Server Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/tech.php">Tech Control</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../rooms/watch.php">Watch Floor</a>
</li>
</ul>
<span class="navbar-text">
You are logged in as lurtnowski@industechnology.com <a class="btn btn-danger btn-sm" href="../logout.php" role="button">Logout</a> </span>
</div>
</nav>
<div class="card" style="margin:25px auto; width:85%">
<div class="card-header">
<h2 style="display:inline">
<img src="../images/add_Unknown_Asset.png" alt="Asset"> Add Unknown Asset to Rack: Rack #15 <small class="text-secondary">Use Mouse To Position Asset</small>
<small class="text-secondary float-right"><span class="icon-map-marker"></span> Location: <a href='' style='cursor:not-allowed' class='jqeasytooltip' data-tiptheme='tipthemewhite' data-tipcontent='Room'>Data Center</a> >
<a href="" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Row" style="cursor:not-allowed">2</a> >
<a href="" class="jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Bay" style="cursor:not-allowed">A</a>
</small>
</h2>
</div>
<div class="card-body" style="padding:1rem 2rem">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-5">
<h3>Manufacturer:<span class="text-secondary float-right">Unknown</span></h3>
<h3 style="margin-bottom:0">Model:<span class="text-secondary float-right">Unknown</span></h3>
<hr>
<div class="row">
<div class="col">
<h5>Width:<span class="text-secondary float-right" style="margin-left:10px">5 in.</span></h5>
</div>
<div class="col">
<h5>Height:<span class="text-secondary float-right" style="margin-left:10px">5 in.</span></h5>
</div>
</div>
<div class="row">
<div class="col-6">
<h5>Depth:<span class="text-secondary float-right" style="margin-left:10px">4 in.</span></h5>
</div>
</div>
</div>
<div class="col">
<div class="alert alert-light shadow-sm" role="alert" style="margin:21px 10px">
<form method="post" action="../unknowns/add_unknown_to_rack_engine.php">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="name">Name (optional)</label>
<input type="text" class="form-control" id="name" name="Name" maxlength="50">
</div>
</div>
<div class="row">
<div class="col">
<label for="Beginning_ru">Beginning RU</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="number" id="Beginning_ru" name="Beginning_ru" class="form-control" value="40">
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col">
<label for="notes">Notes</label>
<textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<button type="submit" class="btn btn-outline-dark btn-block btn-lg"><span class="icon-plus"></span> Add</button>
<input type="hidden" name="rack_id" value="15">
<input type="hidden" name="unknown_type_id" value="4">
<input type="hidden" name="mounting_direction" value="Front">
<input type="hidden" name="height_ru" value="42">
<input type="hidden" name="x_coord" id="x_coord" value="">
<input type="hidden" name="y_coord" id="y_coord" value="">
<input type="hidden" name="unknown_height" value="5.000">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked>
<label for="tabone">Front</label>
<div class="tab">
<svg viewBox="0 0 250 462" xmlns="http://www.w3.org/2000/svg" onload="makeDraggable(evt)">
<defs>
<script type="text/javascript"><![CDATA[
function makeDraggable(evt) {
var svg = evt.target;
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);
svg.addEventListener('touchstart', startDrag);
svg.addEventListener('touchmove', drag);
svg.addEventListener('touchend', endDrag);
svg.addEventListener('touchleave', endDrag);
svg.addEventListener('touchcancel', endDrag);
var selectedElement, offset, transform,
bbox, minX, maxX, minY, maxY, confined;
var boundaryX1 = 27;
var boundaryX2 = 203;
var boundaryY1 = 17;
var boundaryY2 = 437;
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
if (evt.touches) { evt = evt.touches[0]; }
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
function startDrag(evt) {
if (evt.target.classList.contains('draggable')) {
selectedElement = evt.target;
offset = getMousePosition(evt);
// Make sure the first transform on the element is a translate transform
var transforms = selectedElement.transform.baseVal;
if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
// Create an transform that translates by (0, 0)
var translate = svg.createSVGTransform();
translate.setTranslate(0, 0);
selectedElement.transform.baseVal.insertItemBefore(translate, 0);
}
// Get initial translation
transform = transforms.getItem(0);
offset.x -= transform.matrix.e;
offset.y -= transform.matrix.f;
confined = evt.target.classList.contains('confine');
if (confined) {
bbox = selectedElement.getBBox();
minX = boundaryX1 - bbox.x;
maxX = boundaryX2 - bbox.x - bbox.width;
minY = boundaryY1 - bbox.y;
maxY = boundaryY2 - bbox.y - bbox.height;
}
}
}
function drag(evt) {
if (selectedElement) {
evt.preventDefault();
var coord = getMousePosition(evt);
var dx = coord.x - offset.x;
var dy = coord.y - offset.y;
if (confined) {
if (dx < minX) { dx = minX; }
else if (dx > maxX) { dx = maxX; }
if (dy < minY) { dy = minY; }
else if (dy > maxY) { dy = maxY; }
}
transform.setTranslate(dx, (Math.round(dy / 10) * 10));
document.getElementById("x_coord").value = dx;
document.getElementById("y_coord").value = (Math.round(dy / 10) * 10);
document.getElementById("Beginning_ru").value = 42 - Math.floor(Math.round(dy / 10) + 2);
}
}
function endDrag(evt) {
selectedElement = false;
}
}
]]> </script>
<pattern id="pattern_J61C8B" patternUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(46)">
<line x1="0" y="0" x2="0" y2="24" stroke="#ffcccb" stroke-width="30" />
</pattern>
<filter id="color-overlay">
<feFlood flood-color="#d9d9d9"/>
<feComposite in2="SourceAlpha" operator="atop"/>
</filter>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<style>
text {
font-size:.6em;
font-face:verdana;
}
rect.rack {
fill:#F5F5F5;
}
path, line {
fill:#DCDCDC;
stroke:black;
stroke-width:.8;
}
.tipthemewhite {margin:3em 0 0 1.1em; }
.jqeasytooltip {cursor:not-allowed;}
rect.asset {
stroke:#DC143C;
stroke-width:1px;
cursor:not-allowed;
}
line.asset {
stroke:#DC143C;
stroke-width:2;
}
line.draggable {
stroke:#000;
stroke-width:5;
}
rect.draggable {
stroke:#000;
fill:#fff;
stroke-width:1;
opacity:.9;
filter:url(#shadow)
}
.draggable {
cursor: move;
}
image {
filter:url(#color-overlay);
}
</style>
</defs>
<path d="M30 10 210 10 205 15 30 15 25 15 Z" />
<path d="M205 439 209 436 210 10 205 15 Z" />
<rect x="27" y="16" width="175" height="425" class="rack" />
<line x1="25" y1="15" x2="25" y2="439"></line>
<line x1="25" y1="439" x2="205" y2="439"></line>
<line x1="26.3" y1="17" x2="26.3" y2="436" style="stroke-width:1;stroke-dasharray:8 2; stroke:#343434" />
<line x1="203.7" y1="17" x2="203.7" y2="436" style="stroke-width:1;stroke-dasharray:8 2; stroke:#343434"></line>
<image href="../materials/manufacturers/Hewlett-Packard.png" x="35" y="25" width="50" />
<rect x="27" y="17" width="175" height="40" fill="url(#pattern_J61C8B)" class="asset"/>
<text x="215" y="432">1</text>
<text x="215" y="422">2</text>
<text x="215" y="412">3</text>
<text x="215" y="402">4</text>
<text x="215" y="392">5</text>
<text x="215" y="382">6</text>
<text x="215" y="372">7</text>
<text x="215" y="362">8</text>
<text x="215" y="352">9</text>
<text x="215" y="342">10</text>
<text x="215" y="332">11</text>
<text x="215" y="322">12</text>
<text x="215" y="312">13</text>
<text x="215" y="302">14</text>
<text x="215" y="292">15</text>
<text x="215" y="282">16</text>
<text x="215" y="272">17</text>
<text x="215" y="262">18</text>
<text x="215" y="252">19</text>
<text x="215" y="242">20</text>
<text x="215" y="232">21</text>
<text x="215" y="222">22</text>
<text x="215" y="212">23</text>
<text x="215" y="202">24</text>
<text x="215" y="192">25</text>
<text x="215" y="182">26</text>
<text x="215" y="172">27</text>
<text x="215" y="162">28</text>
<text x="215" y="152">29</text>
<text x="215" y="142">30</text>
<text x="215" y="132">31</text>
<text x="215" y="122">32</text>
<text x="215" y="112">33</text>
<text x="215" y="102">34</text>
<text x="215" y="92">35</text>
<text x="215" y="82">36</text>
<text x="215" y="72">37</text>
<text x="215" y="62">38</text>
<text x="215" y="52">39</text>
<text x="215" y="42">40</text>
<text x="215" y="32">41</text>
<text x="215" y="22">42</text>
<rect x="27" y="17" width="50" height="30" class="draggable confine"/>
</svg>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Back</label>
<div class="tab">
<svg viewBox="0 0 250 462" xmlns="http://www.w3.org/2000/svg" onload="makeDraggable(evt)">
<path d="M30 10 210 10 205 15 30 15 25 15 Z" />
<path d="M205 439 209 436 210 10 205 15 Z" />
<rect x="25" y="16" width="179" height="425" class="rack" />
<line x1="25" y1="15" x2="25" y2="439"></line>
<line x1="25" y1="439" x2="205" y2="439"></line>
<line x1="26.3" y1="16" x2="26.3" y2="437" style="stroke-width:1;stroke-dasharray:8 2; stroke:#343434" />
<line x1="203.7" y1="16" x2="203.7" y2="437" style="stroke-width:1;stroke-dasharray:8 2; stroke:#343434"></line>
<text x="213" y="431">1</text>
<text x="213" y="421">2</text>
<text x="213" y="411">3</text>
<text x="213" y="401">4</text>
<text x="213" y="391">5</text>
<text x="213" y="381">6</text>
<text x="213" y="371">7</text>
<text x="213" y="361">8</text>
<text x="213" y="351">9</text>
<text x="213" y="341">10</text>
<text x="213" y="331">11</text>
<text x="213" y="321">12</text>
<text x="213" y="311">13</text>
<text x="213" y="301">14</text>
<text x="213" y="291">15</text>
<text x="213" y="281">16</text>
<text x="213" y="271">17</text>
<text x="213" y="261">18</text>
<text x="213" y="251">19</text>
<text x="213" y="241">20</text>
<text x="213" y="231">21</text>
<text x="213" y="221">22</text>
<text x="213" y="211">23</text>
<text x="213" y="201">24</text>
<text x="213" y="191">25</text>
<text x="213" y="181">26</text>
<text x="213" y="171">27</text>
<text x="213" y="161">28</text>
<text x="213" y="151">29</text>
<text x="213" y="141">30</text>
<text x="213" y="131">31</text>
<text x="213" y="121">32</text>
<text x="213" y="111">33</text>
<text x="213" y="101">34</text>
<text x="213" y="91">35</text>
<text x="213" y="81">36</text>
<text x="213" y="71">37</text>
<text x="213" y="61">38</text>
<text x="213" y="51">39</text>
<text x="213" y="41">40</text>
<text x="213" y="31">41</text>
<text x="213" y="21">42</text>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="material" class="overlay">
<div class="popup" style="width:50%">
<div class="content">
<div class="card">
<h2 class="card-header" style="padding:0"><img src="../images/new_icon.png" style="position:relative; height:50px;">Material</h2>
<div class="card-body">
<div class="alert alert-light shadow-sm" role="alert" style="margin:10px">
<form method="post" action="../materials/add_material_unknown_engine.php">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="Manufacturer">Manufacturer</label>
<input type="text" class="form-control" id="Manufacturer" name="Manufacturer" maxlength="50" value="Unknown" required>
</div>
<div class="col">
<label for="Model">Model</label>
<input type="text" class="form-control" id="Model" name="Model" maxlength="50" value="Unknown" required>
</div>
<!-- <div class="col">
<label for="Airflow_Type">Airflow Type</label>
<select class="form-control" id="Airflow_Type" name="Airflow_Type" disabled>
<option value="">Select</option>
<option value="Ambient">Ambient</option>
<option value="Front To Back">Front To Back</option>
</select>
</div>
<div class="col">
<label for="Power_Consumption">Power Consumption</label>
<div class="input-group">
<input type="number" class="form-control" id="Power_Consumption" name="Power_Consumption" min="0" max="9999" step=".1" disabled>
<div class="input-group-append">
<span class="input-group-text">Watts</span>
</div>
</div>
</div> -->
</div>
<div class="row">
<div class="col">
<label for="Width">Width</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<input type="number" class="form-control" id="Width" name="Width" min="0" max="25" step=".1" required>
<div class="input-group-append">
<span class="input-group-text">inches</span>
</div>
</div>
</div>
<div class="col">
<label for="Height">Height</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<input type="number" class="form-control" id="Height" name="Height" min="0" max="50" step=".1" required >
<div class="input-group-append">
<span class="input-group-text">inches</span>
</div>
</div>
</div>
<div class="col">
<label for="Depth">Depth</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<input type="number" class="form-control" id="Depth" name="Depth" min="0" max="50" step=".1" required>
<div class="input-group-append">
<span class="input-group-text">inches</span>
</div>
</div>
</div>
<!-- <div class="col">
<label for="Weight">Weight</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<input type="number" class="form-control" id="Weight" name="Weight" min="0" max="50" step=".1" disabled>
<div class="input-group-append">
<span class="input-group-text">pounds</span>
</div>
</div>
</div> -->
</div>
<!-- <div class="row">
<div class="col">
<label for="Requires_Diverse_Power">Requires Diverse Power</label>
<select class="form-control" id="Requires_Diverse_Power" name="Requires_Diverse_Power" disabled>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
<div class="col">
<label for="plug_type">Plug Type</label>
<select class="form-control" id="plug_type" name="plug_type" disabled>
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col">
<label for="Total_Plugs">Total Plugs</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Total_Plugs" name="Total_Plugs">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="col">
<label for="Required_Plugs">Required Plugs</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Required_Plugs" name="Required_Plugs">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="Front_Cols">Columns (Front)</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Front_Cols" name="Front_Cols">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</div>
<div class="col">
<label for="Front_Rows">Rows (Front)</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Front_Rows" name="Front_Rows">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</div>
<div class="col">
<label for="Back_Cols">Columns (Back)</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Back_Cols" name="Back_Cols">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</div>
<div class="col">
<label for="Back_Rows">Rows (Back)</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="Back_Rows" name="Back_Rows">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="input_power_type">Input Power Type</label>
<select class="form-control" id="input_power_type" name="input_power_type" disabled>
<option value="One Phase">One Phase</option>
<option value="Two Phase">Two Phase</option>
<option value="Three Phase">Three Phase</option>
<option value="Direct Current">Direct crrent</option>
</select>
</div>
<div class="col">
<label for="mounting_type">Mounting Type</label>
<select class="form-control" id="mounting_type" name="mounting_type">
<option value="Full Width Shelf">Full Width Shelf</option>
<option value="Rack 19 Inch">Rack 19 Inch</option>
<option value="Floor Standing">Floor Standing</option>
</select>
</div>
<div class="col">
<label for="number_of_kvm_outlets">Number Of KVM Outlets</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<select class="form-control" id="number_of_kvm_outlets" name="number_of_kvm_outlets">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="col">
<label for="network_speed">Network Speed</label>
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">#</span>
</div>
<input type="number" class="form-control" id="network_speed" name="network_speed" min="0" max="2500" step=".1" disabled>
<div class="input-group-append">
<span class="input-group-text">Mbps.</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label for="requires_kvm_switch">Requires KVM Switch</label>
<select class="form-control" id="requires_kvm_switch" name="requires_kvm_switch" disabled>
<option value="">Select</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="col">
<label for="standard_copper_ports">Standard Copper Ports</label>
<select class="form-control" id="standard_copper_ports" name="standard_copper_ports" disabled>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<label for="standard_fiber_optic_ports">Standard Fiber Optic Ports</label>
<select class="form-control" id="standard_fiber_optic_ports" name="standard_fiber_optic_ports" disabled>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<label for="undefined_ports">Undefined Ports</label>
<select class="form-control" id="undefined_ports" name="unidentified_ports" disabled>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div> -->
<div class="row justify-content-center">
<div class="col-4" style="margin-top:25px">
<button type="submit" class="btn btn-outline-dark btn-block btn-lg"><span class="icon-plus"></span> Add</button>
</div>
</div>
</div>
</div>
<input type="hidden" name="rack_id" value="15">
<input type="hidden" name="mounting_direction" value="Front">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='../scripts/jquery-3.0.0.js' type='text/javascript'></script>
<!-- select2 script -->
<script src='../scripts/select2.min.js'></script>
<script>
$(document).ready(function(){
$("#alignment").select2({
templateResult: alignmentOptions
});});
function alignmentOptions (state) {
if (!state.id) { return state.text; }
console.log(state.element.value);
var $state = $(
'<span ><img sytle="display: inline-block" class="type" src="../images/alignment_' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
);
return $state;
}
</script>
<script>
$(document).ready(function(){
$("#plug_type").select2({
templateResult: plugOptions
});
});
function plugOptions (state) {
if (!state.id) { return state.text; }
console.log(state.element.value);
var $state = $(
'<span ><img class="type" src="../images/plug_type_' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
);
return $state;
}
</script>
<script src="../scripts/popper.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
I increase to width of the rect though
I can use CSS classes on a rect element inside a SVG?
You have some global css for line and path which are over-riding the attributes in the pattern definition.
path, line {
fill: #DCDCDC;
stroke: black;
stroke-width: .8;
}
Try something like this:
#pattern_J61C8B line {
fill:#ffcccb;
stroke-width:30;
stroke:#ffcccb;
}
Bear in mind SVG is not a speciality of mine:)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.