visibility: hidden svg sibling side effect-CodePudding

So I have 2 identical SVG images following each other.
When I apply style="visibility: hidden" attribute to first of it, both svg elements disappears.
Can anyone explain why?

<div style="background:black">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
    style="visibility: hidden"
  >
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
  >
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
</div>

CodePudding user response：

Like commented all ids in a document must be unique. So either stick to the visibility property and rename attributes, so that each SVG is different:

<div style="background:black">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
    style="visibility: hidden"
  >
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
  >
    <g clip-path="url(#clip1)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip1">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
</div>

Or, replace the visibility property with display and remove the <clipPath> from the second SVG and let the second SVG use the <clipPath> of the first.

<div style="background:black">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
    style="display: none"
  >
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="white"
  >
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
  </svg>
</div>

CodePudding user response：

There is a difference between visibility and display in CSS. The first is inherited, the second isn't.

Therefore having the first svg as visibility: hidden means that its children also are visibility: hidden.

The second svg does not of itself inherit this hidden visibility but it is using the path defined in the first svg which has inherited visibility hidden. Hence it is not seen.

If you make the first display: none then the first cross won't be shown, but the second one will be because its using the path which hasn't inherited display none.

<div style="background:black">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="white" style="display: none;">
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip0">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="white">
    <g clip-path="url(#clip0)">
      <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"
      ></path>
    </g>
    <defs>
      <clipPath id="clip1">
        <rect width="20" height="20" fill="white"></rect>
      </clipPath>
    </defs>
  </svg>
</div>

Note: I haven't altered the ids in the two svgs because they aren't what caused the problem in the question. However, they should be made different.