SVG Path คลาสพิเศษ (Branch 6439)

✨ PAWIT PREMPREE

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:grey;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
      background:white;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <rect x="5" y="5" width="90" height="90" fill="#0000" stroke="red"></rect>
      <path d="
M8,22 h7 v-14 h5 v5 h-12 v-5 h5 v12 h-5 v-5 h14 v-7 
               " 
            stroke-width="0.5"
            stroke="red"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="
M78,92 v-7 h14 v-5 h-5 v12 h5 v-5 h-12 v5 h5 v-14 h7
               " 
            stroke-width="0.5"
            stroke="red"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="
M78,8 v7 h14 v5 h-5 v-12 h5 v5 h-12 v-5 h5 v14 h7
               " 
            stroke-width="0.5"
            stroke="red"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <path d="
M8,78 h7 v14 h5 v-5 h-12 v5 h5 v-12 h-5 v5 h14 v7 
               " 
            stroke-width="0.5"
            stroke="red"
            stroke-linecap="round"
            stroke-linejoin="round"
            fill="#0000"
            />
      <image href="https://images.all-free-download.com/images/graphiclarge/chinese_dragon_art_311373.jpg" width="60" height="50" x="20" y="25"></image>
      <line x1="22" y1="8" x2="78" y2="8" stroke="red" stroke-linecap="round" stroke-width="0.5" />
      <line x1="8" y1="22" x2="8" y2="78" stroke="red" stroke-linecap="round" stroke-width="0.5" />
      <line x1="22" y1="92" x2="78" y2="92" stroke="red" stroke-linecap="round" stroke-width="0.5" />
      <line x1="92" y1="78" x2="92" y2="22" stroke="red" stroke-linecap="round" stroke-width="0.5" />
    </svg>
  </body>
</html>