SVG pattern not showing

lurtnowski · December 17, 2021, 1:37am

I have a SVG

I dont understand why the pattern is not being used like

when I look at each element in the inspector, I see no difference.

John_Betong · December 17, 2021, 2:16am

Why don’t you post the SVG script?

It will make it easier for other users to test?

The screen dumps are ineffective.

lurtnowski · December 17, 2021, 2:47am

Heres the 2 svgs, one on top of another


<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 = 25.5;
        var boundaryX2 = 204;
        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) + 0);          
		  
		  }
        }

        function endDrag(evt) {
          selectedElement = false;
		  

          

        }
      }
    ]]> </script>
  <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#FA8072" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern>
  <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern> 
  <filter id="color-overlay">
    <feFlood flood-color="#d9d9d9"/>
    <feComposite in2="SourceAlpha" operator="atop"/>
  </filter>
<style>
text { 
font-size:.6em;
font-face:verdana;
}
rect.rack {
fill:#F5F5F5;
}
path {
	fill:#DCDCDC;
	stroke:black;
	stroke-width:.8;
}
.tipthemewhite {margin:3em 0 0 1.1em; }
.jqeasytooltip {cursor:not-allowed;}
rect.asset {
      stroke:#666;
      stroke-width:1px;
	  cursor:not-allowed;
	  fill:url(#pattern2);
}
rect.collision {
      stroke:red;
      stroke-width:1px;
	  cursor:not-allowed;
	  fill:url(#pattern);
}
line.asset {
	stroke:#666;
	stroke-width:2;
}
line.draggable {
	stroke:#000;
	stroke-width:5;
	cursor: move;
}
rect.draggable {
	stroke:#000;
	fill:#fff;
	stroke-width:1;
	opacity:.9;
	cursor: move;
}
image {
  filter:url(#color-overlay);
}
</style>
</defs> 
<path d="M204 16 209 10 30 10 25 16"/>
<path d="M204 441 209  436 209 10 204 16"/>
<rect x="25" y="16" width="179" height="425" style="fill:#f5f5f5;stroke:black;stroke-width:.8;"/>
<line x1="26.7" y1="16" x2="26.7" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666" /> 
<line x1="202.3" y1="16" x2="202.3" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666"></line> 
<image href="../materials/manufacturers/Hewlett-Packard.png" x="35" y="25" width="50" />
<text x="215" y="433">1</text>
<text x="215" y="423">2</text>
<text x="215" y="413">3</text>
<text x="215" y="403">4</text>
<text x="215" y="393">5</text>
<text x="215" y="383">6</text>
<text x="215" y="373">7</text>
<text x="215" y="363">8</text>
<text x="215" y="353">9</text>
<text x="215" y="343">10</text>
<text x="215" y="333">11</text>
<text x="215" y="323">12</text>
<text x="215" y="313">13</text>
<text x="215" y="303">14</text>
<text x="215" y="293">15</text>
<text x="215" y="283">16</text>
<text x="215" y="273">17</text>
<text x="215" y="263">18</text>
<text x="215" y="253">19</text>
<text x="215" y="243">20</text>
<text x="215" y="233">21</text>
<text x="215" y="223">22</text>
<text x="215" y="213">23</text>
<text x="215" y="203">24</text>
<text x="215" y="193">25</text>
<text x="215" y="183">26</text>
<text x="215" y="173">27</text>
<text x="215" y="163">28</text>
<text x="215" y="153">29</text>
<text x="215" y="143">30</text>
<text x="215" y="133">31</text>
<text x="215" y="123">32</text>
<text x="215" y="113">33</text>
<text x="215" y="103">34</text>
<text x="215" y="93">35</text>
<text x="215" y="83">36</text>
<text x="215" y="73">37</text>
<text x="215" y="63">38</text>
<text x="215" y="53">39</text>
<text x="215" y="43">40</text>
<text x="215" y="33">41</text>
<text x="215" y="23">42</text>
<rect x="25.5" y="16" width="177.625" height="10" class="asset"/>
<rect x="46.8" y="46" width="85.91975" height="10" class="asset"/>
<rect x="25.5" y="216" width="177.625" height="10" class="asset"/>
<rect x="70.7" y="136" width="84.7119" height="20" class="asset"/>

</svg>								
<svg viewBox="0 0 250 462" xmlns="http://www.w3.org/2000/svg" onload="makeDraggable(evt)">
<defs>
  <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern> 
</defs>
<path d="M204 16 209 10 30 10 25 16"/>
<path d="M204 441 209  436 209 10 204 16"/>
<rect x="25" y="16" width="179" height="425" style="fill:#f5f5f5;stroke:black;stroke-width:.8;"/>
<line x1="26.7" y1="16" x2="26.7" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666" /> 
<line x1="202.3" y1="16" x2="202.3" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666"></line> 
<text x="215" y="433">1</text>
<text x="215" y="423">2</text>
<text x="215" y="413">3</text>
<text x="215" y="403">4</text>
<text x="215" y="393">5</text>
<text x="215" y="383">6</text>
<text x="215" y="373">7</text>
<text x="215" y="363">8</text>
<text x="215" y="353">9</text>
<text x="215" y="343">10</text>
<text x="215" y="333">11</text>
<text x="215" y="323">12</text>
<text x="215" y="313">13</text>
<text x="215" y="303">14</text>
<text x="215" y="293">15</text>
<text x="215" y="283">16</text>
<text x="215" y="273">17</text>
<text x="215" y="263">18</text>
<text x="215" y="253">19</text>
<text x="215" y="243">20</text>
<text x="215" y="233">21</text>
<text x="215" y="223">22</text>
<text x="215" y="213">23</text>
<text x="215" y="203">24</text>
<text x="215" y="193">25</text>
<text x="215" y="183">26</text>
<text x="215" y="173">27</text>
<text x="215" y="163">28</text>
<text x="215" y="153">29</text>
<text x="215" y="143">30</text>
<text x="215" y="133">31</text>
<text x="215" y="123">32</text>
<text x="215" y="113">33</text>
<text x="215" y="103">34</text>
<text x="215" y="93">35</text>
<text x="215" y="83">36</text>
<text x="215" y="73">37</text>
<text x="215" y="63">38</text>
<text x="215" y="53">39</text>
<text x="215" y="43">40</text>
<text x="215" y="33">41</text>
<text x="215" y="23">42</text>
<rect x="25.5" y="16" width="177.625" height="130" class="asset" />
<rect x="26.5" y="246" width="177.625" height="10" class="asset"/>
<rect x="25.5" y="166" width="177.625" height="10" class="asset"/>
<rect x="141.9" y="206" width="46.0560992" height="20" class="asset"/>
<rect x="25.5" y="16" width="177.975" height="10" class="draggable confine"/></svg>

I saved it as a html page as they both seem to dhow the pattern.
But this version works different when I use the tabs.css file


<!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/tabs.css">
<style>
.tipthemewhite {margin:3em 0 0 1.1em;}
</style>
</head>
<body>
			  <div class="tabs">
		<input type="radio" name="tabs" id="tabone" >
			  <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 = 25.5;
        var boundaryX2 = 204;
        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) + 0);          
		  
		  }
        }

        function endDrag(evt) {
          selectedElement = false;
		  

          

        }
      }
    ]]> </script>
  <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#FA8072" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern>
  <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern> 
  <filter id="color-overlay">
    <feFlood flood-color="#d9d9d9"/>
    <feComposite in2="SourceAlpha" operator="atop"/>
  </filter>
<style>
text { 
font-size:.6em;
font-face:verdana;
}
rect.rack {
fill:#F5F5F5;
}
path {
	fill:#DCDCDC;
	stroke:black;
	stroke-width:.8;
}
.tipthemewhite {margin:3em 0 0 1.1em; }
.jqeasytooltip {cursor:not-allowed;}
rect.asset {
      stroke:#666;
      stroke-width:1px;
	  cursor:not-allowed;
	  fill:url(#pattern2);
}
rect.collision {
      stroke:red;
      stroke-width:1px;
	  cursor:not-allowed;
	  fill:url(#pattern);
}
line.asset {
	stroke:#666;
	stroke-width:2;
}
line.draggable {
	stroke:#000;
	stroke-width:5;
	cursor: move;
}
rect.draggable {
	stroke:#000;
	fill:#fff;
	stroke-width:1;
	opacity:.9;
	cursor: move;
}
image {
  filter:url(#color-overlay);
}
</style>
</defs> 
<path d="M204 16 209 10 30 10 25 16"/>
<path d="M204 441 209  436 209 10 204 16"/>
<rect x="25" y="16" width="179" height="425" style="fill:#f5f5f5;stroke:black;stroke-width:.8;"/>
<line x1="26.7" y1="16" x2="26.7" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666" /> 
<line x1="202.3" y1="16" x2="202.3" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666"></line> 
<image href="../materials/manufacturers/Hewlett-Packard.png" x="35" y="25" width="50" />
<text x="215" y="433">1</text>
<text x="215" y="423">2</text>
<text x="215" y="413">3</text>
<text x="215" y="403">4</text>
<text x="215" y="393">5</text>
<text x="215" y="383">6</text>
<text x="215" y="373">7</text>
<text x="215" y="363">8</text>
<text x="215" y="353">9</text>
<text x="215" y="343">10</text>
<text x="215" y="333">11</text>
<text x="215" y="323">12</text>
<text x="215" y="313">13</text>
<text x="215" y="303">14</text>
<text x="215" y="293">15</text>
<text x="215" y="283">16</text>
<text x="215" y="273">17</text>
<text x="215" y="263">18</text>
<text x="215" y="253">19</text>
<text x="215" y="243">20</text>
<text x="215" y="233">21</text>
<text x="215" y="223">22</text>
<text x="215" y="213">23</text>
<text x="215" y="203">24</text>
<text x="215" y="193">25</text>
<text x="215" y="183">26</text>
<text x="215" y="173">27</text>
<text x="215" y="163">28</text>
<text x="215" y="153">29</text>
<text x="215" y="143">30</text>
<text x="215" y="133">31</text>
<text x="215" y="123">32</text>
<text x="215" y="113">33</text>
<text x="215" y="103">34</text>
<text x="215" y="93">35</text>
<text x="215" y="83">36</text>
<text x="215" y="73">37</text>
<text x="215" y="63">38</text>
<text x="215" y="53">39</text>
<text x="215" y="43">40</text>
<text x="215" y="33">41</text>
<text x="215" y="23">42</text>
<rect x="25.5" y="16" width="177.625" height="10" class="asset"/>
<rect x="46.8" y="46" width="85.91975" height="10" class="asset"/>
<rect x="25.5" y="216" width="177.625" height="10" class="asset"/>
<rect x="70.7" y="136" width="84.7119" height="20" class="asset"/>

</svg>								
				</div>
			  <input type="radio" name="tabs" id="tabtwo" checked>
			  <label for="tabtwo">Back</label>
				<div class="tab">
<svg viewBox="0 0 250 462" xmlns="http://www.w3.org/2000/svg" onload="makeDraggable(evt)">
<defs>
  <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern> 
</defs>
<path d="M204 16 209 10 30 10 25 16"/>
<path d="M204 441 209  436 209 10 204 16"/>
<rect x="25" y="16" width="179" height="425" style="fill:#f5f5f5;stroke:black;stroke-width:.8;"/>
<line x1="26.7" y1="16" x2="26.7" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666" /> 
<line x1="202.3" y1="16" x2="202.3" y2="441" style="stroke-width:2;stroke-dasharray:5; stroke:#666"></line> 
<text x="215" y="433">1</text>
<text x="215" y="423">2</text>
<text x="215" y="413">3</text>
<text x="215" y="403">4</text>
<text x="215" y="393">5</text>
<text x="215" y="383">6</text>
<text x="215" y="373">7</text>
<text x="215" y="363">8</text>
<text x="215" y="353">9</text>
<text x="215" y="343">10</text>
<text x="215" y="333">11</text>
<text x="215" y="323">12</text>
<text x="215" y="313">13</text>
<text x="215" y="303">14</text>
<text x="215" y="293">15</text>
<text x="215" y="283">16</text>
<text x="215" y="273">17</text>
<text x="215" y="263">18</text>
<text x="215" y="253">19</text>
<text x="215" y="243">20</text>
<text x="215" y="233">21</text>
<text x="215" y="223">22</text>
<text x="215" y="213">23</text>
<text x="215" y="203">24</text>
<text x="215" y="193">25</text>
<text x="215" y="183">26</text>
<text x="215" y="173">27</text>
<text x="215" y="163">28</text>
<text x="215" y="153">29</text>
<text x="215" y="143">30</text>
<text x="215" y="133">31</text>
<text x="215" y="123">32</text>
<text x="215" y="113">33</text>
<text x="215" y="103">34</text>
<text x="215" y="93">35</text>
<text x="215" y="83">36</text>
<text x="215" y="73">37</text>
<text x="215" y="63">38</text>
<text x="215" y="53">39</text>
<text x="215" y="43">40</text>
<text x="215" y="33">41</text>
<text x="215" y="23">42</text>
<rect x="25.5" y="16" width="177.625" height="130" class="asset" />
<rect x="26.5" y="246" width="177.625" height="10" class="asset"/>
<rect x="25.5" y="166" width="177.625" height="10" class="asset"/>
<rect x="141.9" y="206" width="46.0560992" height="20" class="asset"/>
<rect x="25.5" y="16" width="177.975" height="10" class="draggable confine"/>
</svg>								
				</div>
				</div>
			</div>					  
			

			  
		</div>
	</div>
</div>
</body>
</html>

ithe css file.

.tabs {
    display: flex;
    flex-wrap: wrap;
}
.tabs label {
    order: 1; 
    display: block;
    padding: .3rem 1em;
    margin-right: 0.2rem;
    margin-bottom:-1px;
    cursor: pointer;
  background: #e3e3e3;
	color:#6c757d;
  font-weight: bold;
  font-size:large;
  border:1px solid #BEBEBE;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99;
  flex-grow: 1;
    width: 100%;
    display: none;
  padding: 1rem;
  background: #fff;
  border:1px solid #BEBEBE;
}
.tabs input[type="radio"] {
    display: none;
}
.tabs input[type="radio"]:checked + label {
    background: #fff;
    border-bottom:2px solid #fff;
    position: relative;
}
.tabs input[type="radio"]:checked + label + .tab {
    display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
	color:#6c757d;
  }
}

PaulOB · December 17, 2021, 4:27pm

Its because the pattern2 is in the element that you have set to display:none so can’t be used. Hide the tabs offscreen instead of display:none.

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  /*display: none;*/
  position:absolute;
  left:-200vw;
  padding: 1rem;
  background: #fff;
  border: 1px solid #bebebe;
}
.tabs input[type="radio"] {
}
.tabs input[type="radio"]:checked + label {
  background: #fff;
  border-bottom: 2px solid #fff;
  position: relative;
}
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
  position:static;
  left:auto;
}

system · March 18, 2022, 11:28pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
SVG cant see pattern HTML & CSS	2	789	March 31, 2022
Svg pattern confusion? HTML & CSS	4	826	July 21, 2021
SVG Pattern? HTML & CSS	9	890	November 4, 2021
Question -- Responsive SVG with Background Image? HTML & CSS	2	1591	December 14, 2016
Help with html/css SVG file code HTML & CSS	16	1678	September 27, 2019

SVG pattern not showing

Related topics