Basic Shapes

line (선)

 

• x1 속성은 x-axis에서 라인의 시작을 정의
• y1 속성은 y-axis에서 라인의 시작을 정의
• x2 속성은 x-axis에서 라인의 끝을 정의
• y2 속성은 y-axis에서 라인의 끝을 정의
  

  <h2>line</h2>
  <svg class="svg01" width="300" height="300">
      <line x1="0" y1="0" x2="300" y2="300">
      </line>
      <style>
          .svg01{
              border:1px solid #000;
          }
          .svg01 line{
              stroke:#000;
              stroke-width:3px;
          }
      </style>
  </svg>​

• 속성
  - stroke-dasharray
    : 줄 사이 간격
  

  <svg class="svg09" width="300" height="300">
      <line x1="20" y1="20" x2="200" y2="20"></line>
      <line x1="20" y1="40" x2="200" y2="40"></line>
      <style>
          .svg09 line:nth-of-type(1){
              stroke:#000;
              stroke-width:6px;
              stroke-linecap:butt;
              stroke-dasharray:5px 10px 3px 5px;
          }
          .svg09 line:nth-of-type(2){
              stroke:rgb(159, 68, 187);
              stroke-width:6px;
              stroke-linecap:butt;
              stroke-dasharray:4px 8px;
          }
      </style>
  </svg>​

 

Rectangle (사각형)

 

• x는 사각형의 좌측 상단의 x 값을 의미
• y는 사각형의 좌측 상단의 y 값을 의미
• width는 사각형의 폭을 의미
• height는 사각형의 높이를 의미
• rx는 사각형의 둥근 꼭짓점의 x 방향으로의 반지름
• ry는 사각형의 둥근 꼭짓점의 y 방향으로의 반지름
  

  <a href="#">
      <svg class="svg07" width="300" height="300">
          <rect x="100" y="100" width="100" height="100" rx="20" ry="20"></rect>
          <rect x="110" y="110" width="80" height="80" rx="15" ry="15"></rect>
          <style>
              .svg07{
                  border:1px solid #000;
              }
              .svg07:hover rect:nth-of-type(1){
                  transform:rotate(45deg);
              }
              .svg07:hover rect:nth-of-type(2){
                  transform:rotate(-45deg);
              }
              .svg07 rect:nth-of-type(1){
                  fill:coral;
                  transition: all 0.5s ease 0s;
                  transform-origin:center;
              }
              .svg07 rect:nth-of-type(2){
                  fill:red;
                  transition: all 0.5s ease 0s;
                  transform-origin:center;
              }
          </style>
      </svg>
  </a>

  
  

Circle (원)

 

• r은 원의 반지름을 의미
• cx는 원의 중심 중 x 값을 의미
• cy는 원의 중심 중 y 값을 의미
  

  <svg class="svg08" width="300" height="300">
      <circle cx="150" cy="150" r="100"></circle>
      <circle cx="120" cy="120" r="20" style="fill:#fff"></circle>
      <circle cx="120" cy="120" r="10"></circle>
      <circle cx="180" cy="120" r="20" style="fill:#fff"></circle>
      <circle cx="180" cy="120" r="10"></circle>
      <line x1="100" y1="200" x2="200" y2="200" style="stroke:#f54d10;stroke-width:3px;"></line>
      <style>
          .svg08{
              border:1px solid #000;
          }
      </style>
  </svg>​

Ellipse (타원)

 

• cx는 타원의 중심 중 x 값을 의미
• cy는 타원의 중심 중 y 값을 의미
• rx는 타원의 x 방향으로의 반지름의 길이를 의미
• ry는 타원의 y 방향으로의 반지름의 길이를 의미
  

  <svg class="svg09" width="300" height="300">
      <!-- <ellipse cx="150" cy="100" rx="100" ry="60"></ellipse>
      <ellipse cx="150" cy="200" rx="100" ry="60"></ellipse> -->
      <ellipse cx="150" cy="150" rx="60" ry="110"></ellipse>
      <ellipse cx="180" cy="150" rx="60" ry="110"></ellipse>
      <style>
          .svg09{
              border:1px solid #000;
          }
          .svg09 ellipse{
              fill:none;
              stroke:#000;
              stroke-width:5px;
          }
      </style>
  </svg>​

 

Polyline

 

• 연결된 직선들의 그룹이다.
• 목록은 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포한된다.
• points
  - 포인트들의 목록(각 숫자)은 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다.
  - 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다.
  

  <svg class="svg01" width="300" height="300">
      <polyline points="20,20 40,25 60,40 80,120 200,180"></polyline>
      <style>
          .svg01 polyline{
              stroke:#000;
              stroke-width:2px;
              fill:none;
          }
      </style>
  </svg>

  
  

Polygon (다각형)

 

• 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다.
• 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다.
• points
  - 포인트들의 목록(각 숫자)은 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다.
  - 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다.
  

  <a href="#">
      <svg class="svg05" width="100" height="100">
          <polygon points="50,0 100,100 0,100"></polygon>
          <style>
              .svg05 polygon{
                  transform:scale(0.8);
                  transition: all 0.5s ease 0s;
                  transform-origin:center;
              }
              .svg05:hover polygon{
                  transform:rotate(180deg);
  
              }
          </style>
      </svg>
  </a>