顯示具有 SVG 標籤的文章。 顯示所有文章
顯示具有 SVG 標籤的文章。 顯示所有文章

解決.svg無法在Azure websites載入顯示的問題

解決.svg無法在Azure websites載入顯示的問題

SVG稱可縮放的向量圖形,它本身有兩種格式,一種是XML格式,簡單想,它就如同一般HTML tag一樣,在網頁的中它使用<svg></svg>標籤。

SVG的XML格式

以下是使用wiki上的範例程式碼,你只要使用<svg></svg>標籤,就能在網頁上畫面你想要的任何向量圖。

  <!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Document</title>
  </head>
  <body>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
      width="467" height="462">
     <!-- This is the red square: -->
     <rect x="80" y="60" width="250" height="250" rx="20" fill="red"
           stroke="black" stroke-width="2px" />
     <!-- This is the blue square: -->
     <rect x="140" y="120" width="250" height="250" rx="40" fill="blue"
           stroke="black" stroke-width="2px" fill-opacity="0.7" />
  </svg>
  </body>
  </html>