SVG 繪製路徑與文字

<path> 路徑

程式碼

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
                <path
                    d="M50 30 C80 90,40 200,400,100"
                    stroke="rgb(248, 117, 61)"
                    fill="rgb(248, 204, 61)"
                    stroke-width="10"
                  />
            </svg>
          
        

程式碼

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)" class="mt-5">
              <path
                d="M225,35 L225,80 M315,35 L315,80 M400,90 C260,200 260,200 140,100"
                stroke="rgb(248, 117, 61)"
                fill="none"
                stroke-width="8"
              />
            </svg>
          
        

<text> 文字

SVG真有趣

程式碼

          
            <svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
              <text x="50,100,180,240,360,430,480" y="80,140,40,180,160,80" 
                  fill="rgb(248, 117, 61)" text-anchor="start" font-size="2em">
                    SVG真有趣
              </text>
            </svg>