title: visibility: hidden svg sibling side effect
body: <p>So I have 2 identical SVG images following each other.<br> When I apply
  <code>style=&quot;visibility: hidden&quot;</code> attribute to first of it, both svg elements disappears.<br>
  Can anyone explain why?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background:black"&gt;
    &lt;svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="white"
      style="visibility: hidden"
    &gt;
      &lt;g clip-path="url(#clip0)"&gt;
        &lt;path
          d="M17.681 19.6019L9.99902 11.9212L2.31897 19.6009C2.19293 19.7272 2.04323 19.8274 1.87842 19.8958C1.7136 19.9642 1.53695 19.9993 1.35852 19.9993C1.18009 19.9993 1.00344 19.9642 0.838623 19.8958C0.673808 19.8274 0.524116 19.7272 0.398071 19.6009C0.14355 19.3462 0.000488281 19.001 0.000488281 18.6409C0.000488281 18.2809 0.14355 17.9356 0.398071 17.681L8.07898 9.99982L0.398071 2.31915C0.14355 2.0645 0.000488281 1.71923 0.000488281 1.35919C0.000488281 0.999151 0.14355 0.653885 0.398071 0.399231C0.652896 0.144649 0.998316 0.00128174 1.35852 0.00128174C1.71873 0.00128174 2.06415 0.144649 2.31897 0.399231L9.99902 8.07892L17.681 0.39679C17.9359 0.142208 18.2813 -0.000671387 18.6415 -0.000671387C19.0017 -0.000671387 19.3472 0.142208 19.6021 0.39679C19.8566 0.651444 19.9995 0.997198 19.9995 1.35724C19.9995 1.71728 19.8566 2.06255 19.6021 2.3172L11.92 9.99884L19.6021 17.681C19.8566 17.9356 19.9995 18.2809 19.9995 18.6409C19.9995 19.001 19.8566 19.3462 19.6021 19.6009C19.4763 19.7276 19.3267 19.8281 19.162 19.8968C18.9972 19.9654 18.8206 20.0007 18.6421 20.0008C18.4635 20.0008 18.2867 19.9657 18.1218 19.8973C17.9569 19.8288 17.8071 19.7283 17.681 19.6019Z"
        &gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;defs&gt;
        &lt;clipPath id="clip0"&gt;
          &lt;rect width="20" height="20" fill="white"&gt;&lt;/rect&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
    &lt;/svg&gt;
    &lt;svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="white"
    &gt;
      &lt;g clip-path="url(#clip0)"&gt;
        &lt;path
          d="M17.681 19.6019L9.99902 11.9212L2.31897 19.6009C2.19293 19.7272 2.04323 19.8274 1.87842 19.8958C1.7136 19.9642 1.53695 19.9993 1.35852 19.9993C1.18009 19.9993 1.00344 19.9642 0.838623 19.8958C0.673808 19.8274 0.524116 19.7272 0.398071 19.6009C0.14355 19.3462 0.000488281 19.001 0.000488281 18.6409C0.000488281 18.2809 0.14355 17.9356 0.398071 17.681L8.07898 9.99982L0.398071 2.31915C0.14355 2.0645 0.000488281 1.71923 0.000488281 1.35919C0.000488281 0.999151 0.14355 0.653885 0.398071 0.399231C0.652896 0.144649 0.998316 0.00128174 1.35852 0.00128174C1.71873 0.00128174 2.06415 0.144649 2.31897 0.399231L9.99902 8.07892L17.681 0.39679C17.9359 0.142208 18.2813 -0.000671387 18.6415 -0.000671387C19.0017 -0.000671387 19.3472 0.142208 19.6021 0.39679C19.8566 0.651444 19.9995 0.997198 19.9995 1.35724C19.9995 1.71728 19.8566 2.06255 19.6021 2.3172L11.92 9.99884L19.6021 17.681C19.8566 17.9356 19.9995 18.2809 19.9995 18.6409C19.9995 19.001 19.8566 19.3462 19.6021 19.6009C19.4763 19.7276 19.3267 19.8281 19.162 19.8968C18.9972 19.9654 18.8206 20.0007 18.6421 20.0008C18.4635 20.0008 18.2867 19.9657 18.1218 19.8973C17.9569 19.8288 17.8071 19.7283 17.681 19.6019Z"
        &gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;defs&gt;
        &lt;clipPath id="clip0"&gt;
          &lt;rect width="20" height="20" fill="white"&gt;&lt;/rect&gt;
        &lt;/clipPath&gt;
      &lt;/defs&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>