궁금한점 210616 - ChoDragon9/posts GitHub Wiki

<style>, <script>는 다른 SVG, DOM에 영향은 없을까?

전역에 영향을 줌. HTML과 동일함.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>
  <script>
    const add = (a, b) => a + b;
  </script>

  <circle cx="50" cy="50" r="50" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <script>
    console.log(add(5, 5));
  </script>
  <circle cx="50" cy="50" r="50" />
</svg>

<symbol>과 <defs>의 차이

  • <symbol>은 도형을 만들어서 재사용함.
  • <defs>는 스토어를 만들어서 내부에 엘리먼트 저장 후 재사용함.

<path>로 도형 엘리먼트를 모두 대체 가능한가?

<path>는 <circle>, <line>, <polygon>, <polyline>, <rect>을 대체 가능.

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
  <path d="M 100 50
           A 50 50, 0, 0, 0, 200 50
           A 50 50, 0, 0, 0, 100 50
           Z"
  />
</svg>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="50" x2="100" y2="50" stroke="black" />
  <path d="M 100 50
           H 200
           Z"
        stroke="gray"
  />
</svg>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="25 25, 25 75, 75 75, 75 25" />
  <path d="M 125 25
           V 75
           H 175
           V 25
           Z"
  />
</svg>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="25 25, 25 75, 75 75, 75 25"
            fill="none"
            stroke="black"
  />
  <path d="M 125 25
           V 75
           H 175
           V 25
           "
        fill="none"
        stroke="black"
  />
</svg>
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="25" y="25" width="50" height="50" />
  <path d="M 125 25
           V 75
           H 175
           V 25
           Z"
  />
</svg>

CSS @namespace가 무엇인가

@namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의.

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
a {}

/* 이는 모든 SVG <a> 요소와 일치합니다 */
svg|a {}

/* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 */
*|a {}

xmlns는 왜 정의하는 건가

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

XML 엘리먼트가 중복되는 것을 방지한다. HTML과 SVG의 중복 엘리먼트가 있을 경우가 있기 때문이다.

⚠️ **GitHub.com Fallback** ⚠️