✏️foreignObject 태그란?

XML 네임스페이스의 요소를 정의한다.

라고 정의되어있다.

그러나 저 한 줄로는 무슨 뜻인지 알기 어려웠다.

EX)

              <foreignObject x="270" y="-95" width="261px" height="174px">
                <div class="tooltip-wrap" v-if="showTooltip">
                  <h2>port-name-001</h2>
                  <span class="material-symbols-outlined material-symbols-20">
                    close
                  </span>
                  <ul class="tooltip-content">
                    <li>
                      <span class="tooltip-name">포트명</span>
                      <span>port-name-001</span>
                    </li>
                    <li>
                      <span class="tooltip-name">상태</span>
                      <a-tag class="ant-tag-status success">
                        <var class="dot"></var>
                        <span class="text">RUNNING</span>
                      </a-tag>
                    </li>
                    <li>
                      <span class="tooltip-name">연동 바로가기</span>
                      <span>host-oke201</span>
                    </li>
                  </ul>
                </div>
              </foreignObject>

Contrabass 내부에 있는 실제 코드이다.

위의 코드를 보고 정의글을 보면 무슨 뜻인지 이해가 간다.

svg 코드 내부에는 HTML 태그를 직접적으로 사용할 수 없기 때문에, <foreignObject> 코드로 감싼 후에 그대로 사용할 수 있게 되는 것이다.