visibility: hidden svg sibling side effect

Question

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>

id values must be unique within a document. Yours aren't.
– Robert Longson
Commented Jul 5, 2022 at 15:01 — Robert Longson, Commented Jul 5, 2022 at 15:01

A Haworth · Accepted Answer · 2022-07-05 18:31:39Z

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.

Thanks! I totally missed out same clipPath ids. But for me that 'horizontal inheritance' is still not so obvious. Is it some non-documented browser engine behavior because of wrong markup? — Andrew Chervyakov, Commented Jul 8, 2022 at 5:46
No, nothing to do with the ids being the same. In this case it made no difference to the outcome because the first instance of an id will be picked up, and that's what was wanted. The browser behavior as far as inheritance goes is documented e.g. in MDN - visibility being inherited, display not being inherited. — A Haworth, Commented Jul 8, 2022 at 8:18
Wait, aren't the ids the cause of the issue? In this example the first svg has visibility:hidden. the second svg has the graphic element tied to the clip path of the first svg <g clip-path="url(#clip0)"> because the first svg clipPath has inherited visibility:hidden, the second svg has its graphic hidden. If I change the clipPath url for the second svg to <g clip-path="url(#clip1)"> the visibility works as expected. codepen — LLai, Commented Aug 15, 2023 at 0:25

chrwahl · Accepted Answer · 2022-07-05 16:48:17Z

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>

Collectives™ on Stack Overflow

visibility: hidden svg sibling side effect

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
html
css
svg
visibility
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged htmlcsssvgvisibility or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
html
css
svg
visibility
or ask your own question.