Hidding SVG affects other SVG styles in the same page

Question

An SVG is loaded several times in the same page. The SVG is used to show a graphic representation of values. Think of a map where every region shows a given value using a color code.

In each SVG, for every region a CSS class is dynamically applied to match the desired SVG pattern fill used.

CSS styles and patterns are defined in the SVG file. Here is an example:

  <svg height="100" width="100">
    <style>
    /*  */
    .striped-pain-1 {fill: url(#striped-pain-1);}
    /*  */
    </style>
    <defs>
        <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
        </pattern>
    </defs>

The problem is when on of the SVGs is hidden (via display:none for example) all SVGs from there to the bottom of the page loose the pattern fill.

I have made a simplified Plunker showing the problem.

https://plnkr.co/edit/F5TzOwDEzneHEW7PT3Ls?p=preview

The only way I have found to prevent this is using different pattern ids for every SVG, but since all share the same file I don't like the solution to duplicate all of them and rename the ids just for this. I wonder there should be a better solution.

So you've learned don't use display:none with references. You could make the SVG width and height 0, translate it off the screen, set it visibility:hidden or various other things to hide it without using display:none — Robert Longson, Mar 28 '18 at 12:15
Thanks, but could you expand on you answer? Why using `display:none` is breaking the styling? I'm a bit on shades on what's happening. — David Casillas, Mar 28 '18 at 13:58
display:none subtrees don't have CSS. Without CSS no styles or attributes mapped to styles will work. — Robert Longson, Mar 28 '18 at 14:09
@RobertLongson since there is a bounty going on, you may want to put these comments in answer. — Kaiido, Jun 27 '19 at 13:20
This question is more related to html structure than css display. Tag DEFS are for storing structures, so the real problem is put a definition inside a div tag that will be hidded. Also, they are duplicated IDs, wich is basicly the core of the question. Response added. https://www.w3schools.com/tags/att_global_id.asp https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs — Benjamin, Jul 01 '19 at 20:53

score 5 · Answer 1 · answered Jun 27 '19 at 13:15

I would put the patterns in a different svg element: <svg class="defs">. This svg element may have position:absolute and a very small width and height. If you add left: -200px; this svg element is invisible.

Also: if one SVG element has this css rule: .striped-pain-1 {fill: url(#striped-pain-1);} you don't need to add it to the second one. In fact you can delete the <style> element from the svg and add this rule to the css.

Please try it: click the numbers (1,2,3) to hide or unhide the svg elements.

let spans = Array.from(document.querySelectorAll("#commands span"))
let svgs = Array.from(document.querySelectorAll(".svgcontainer"))
spans.forEach((s,i) =>{
let n = 0;
s.addEventListener("click",(e)=>{
n++;
let thisSvg = svgs[i].querySelector("svg")
if(n%2 == 1){thisSvg.style.display="none";
            }else{
             thisSvg.style.display="block";}
})
})

svg {
  display:block;
}
.defs {
  position: absolute;
  left: -200px;
}
span {
  display: inline-block;
  width: 2em;
  height: 1em;
  border: 1px solid;
  text-align: center;
  cursor: pointer;
}
.svgcontainer {
  height: 100px;
  width: 100px;
  border: 1px solid;
  display: inline-block;
}

<p id="commands"><span>1</span> <span>2</span> <span>3</span></p>

<svg class="defs" width="1" height="1">
  <defs>
    <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
     <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
    </pattern>
    
      <pattern id="striped-pain-2" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
   </defs>
</svg>

<div class="svgcontainer">
  <svg height="100" width="100">
   <style>
    /*  */
    .striped-pain-1 {fill: url(#striped-pain-1);}
    /*  */
   </style>
    
    <circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 

</div>
<div class="svgcontainer">
  <svg height="100" width="100">
   <!-- <style>
      /*  */
      .striped-pain-1 {fill: url(#striped-pain-1);}
      /*  */
    </style>-->
    <!--<defs>
     <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>-->
    <circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>
<div class="svgcontainer">
  <svg height="100" width="100">
    <style>
      /*  */
      .striped-pain-2 {fill: url(#striped-pain-2);}
      /*  */
    </style>
    <circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

That's the approach I did use in the end. I just share all the `defs` for all svgs in a not visible `svg` element. It also simplified my code since avoid unnecesary duplication. — David Casillas, Jun 28 '19 at 14:16

score 4 · Answer 2 · answered Jun 27 '19 at 20:00

This problem appears because you've specified the same id for two different elements:

<pattern id="striped-pain-1" on lines 52 and 69.

In HTML id should be unique.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Replacing the duplicated id with the unique one solves the problem. See the snippet below:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
    <script>
      function show(id) {
        document.getElementById('circle-' + id).style.display = 'block';
      }
      function hide(id) {
        document.getElementById('circle-' + id).style.display = 'none';
      }
      function reset() {
        document.getElementById('circle-1').style.display = 'block';
        document.getElementById('circle-2').style.display = 'block';
      }
    </script>
  </head>

<body ng-controller="MainCtrl">
    
<div style="padding:10px">
  <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="reset()" value="Step 4: Reset." /> 
</div>

<div id="circle-1" style="padding:10px;border:solid grey 1px">
  Circle 1
  <svg height="100" width="100">
   <style>
    /*  */
    .striped-pain-1 {fill: url(#striped-pain-1);}
    /*  */
   </style>
    <defs>
    <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
     <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
    </pattern>
   </defs>
    <circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div id="circle-2" style="padding:10px;border:solid grey 1px">
  Circle 2
  <svg height="100" width="100">
    <style>
      /*  */
      .striped-pain-2 {fill: url(#striped-pain-2);}
      /*  */
    </style>
    <defs>
     <pattern id="striped-pain-2" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>
    <circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div style="padding:10px;border:solid grey 1px">
  Circle 3
  <svg height="100" width="100">
    <style>
      /*  */
      .striped-pain-3 {fill: url(#striped-pain-3);}
      /*  */
    </style>
    <defs>
     <pattern id="striped-pain-3" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>
    <circle class="striped-pain-3" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div style="padding:10px;">
  These circles are SVGs. They have background applied as a pattern. The first two use clases with the same name, but the third not.
  Hidding the first SVG affects the second one, but hidding the second does not affect the first.
</div>


  </body>

</html>

Probably you might want to get rid of SVGs and use simpler way:

function show(id) {
  document.getElementById('circle-' + id).style.display = 'block';
}

function hide(id) {
  document.getElementById('circle-' + id).style.display = 'none';
}

function reset() {
  document.getElementById('circle-1').style.display = 'block';
  document.getElementById('circle-2').style.display = 'block';
}

#circle-1,
#circle-2,
#circle-3 {
  padding: 10px;
  border: solid grey 1px
}

.circle {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 10px;
  border: solid 3px #000;
  border-radius: 55%;
  background: linear-gradient(135deg, #fff 20%, pink 21%, pink 50%, #fff 51%, #fff 71%, pink 72%) 0 0 / 8px 8px;
}


}

<div style="padding:10px">
  <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." />
</div>

<div style="padding:10px">
  <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." />
</div>

<div style="padding:10px">
  <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." />
</div>

<div style="padding:10px">
  <input type='button' onclick="reset()" value="Step 4: Reset." />
</div>

<div id="circle-1">Circle 1 <span class="circle"></span></div>
<div id="circle-2">Circle 2 <span class="circle"></span></div>
<div id="circle-3">Circle 3 <span class="circle"></span></div>

they don't use the ID twice they reference the same pattern twice, the probem is the patterns are in the div which get the "display: none" style, which makes the pattern inexistant so they can't be reference in the next div. — Salix, Jul 01 '19 at 08:33
Sorry @Salix, but `display: none` only makes an element invisible to the viewer. It is NOT removed from the DOM, hence it still exists and therefore still accessible from JS, CSS, HTML. @Kosh Very, making the ID's unique is the proper way to go. — Rene van der Lende, Jul 03 '19 at 16:04
oh yeah, I forgot that I removed the 2nd 'stripped-pain-1' pattern to test, but if you do you can't ref the pattern from the other circle div it has to be outside which is what I meant. — Salix, Jul 09 '19 at 02:06

score 0 · Answer 3 · answered Jun 28 '19 at 21:37

Your problem is that you are defining a SVG path with id="striped-pain-1". Two steps: first, move out from toogle elements an unique SVG pattern to use as style, I have used "#striped-pain-unique". Next, use as fill url in every element you need.

.striped-pain-1 {fill: url(#striped-pain-unique);}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
    <script>
      function show(id) {
        document.getElementById('circle-' + id).style.display = 'block';
      }
      function hide(id) {
        document.getElementById('circle-' + id).style.display = 'none';
      }
      function reset() {
        document.getElementById('circle-1').style.display = 'block';
        document.getElementById('circle-2').style.display = 'block';
      }
    </script>
  </head>

<body ng-controller="MainCtrl">
    
<div style="padding:10px">
  <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="reset()" value="Step 4: Reset." /> 
</div>

<svg height="100" width="100">
    <defs>
     <pattern id="striped-pain-unique" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>
</svg>

<div id="circle-1" style="padding:10px;border:solid grey 1px">
  Circle 1
  <svg height="100" width="100">
   <style>
    /*  */
    .striped-pain-1 {fill: url(#striped-pain-unique);}
    /*  */
   </style>
    <defs>
    <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
     <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
    </pattern>
   </defs>
    <circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div id="circle-2" style="padding:10px;border:solid grey 1px">
  Circle 2
  <svg height="100" width="100">
    <style>
      /*  */
      .striped-pain-1 {fill: url(#striped-pain-unique);}
      /*  */
    </style>
    <defs>
     <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>
    <circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div style="padding:10px;border:solid grey 1px">
  Circle 3
  <svg height="100" width="100">
    <style>
      /*  */
      .striped-pain-2 {fill: url(#striped-pain-unique);}
      /*  */
    </style>
    <defs>
     <pattern id="striped-pain-2" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
     </pattern>
    </defs>
    <circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div style="padding:10px;">
  These circles are SVGs. They have background applied as a pattern. The first two use clases with the same name, but the third not.
  Hidding the first SVG affects the second one, but hidding the second does not affect the first.
</div>


  </body>

</html>

I forgot to add: "Objects created inside a element are not rendered directly", so that's why css styling starts to work when put an unique def block outside a toogle div. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs — Benjamin, Jul 01 '19 at 20:58

Hidding SVG affects other SVG styles in the same page

3 Answers3

Linked