From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../web/svg/tutorial/getting_started/index.html | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/zh-tw/web/svg/tutorial/getting_started/index.html (limited to 'files/zh-tw/web/svg/tutorial/getting_started/index.html') diff --git a/files/zh-tw/web/svg/tutorial/getting_started/index.html b/files/zh-tw/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..177e9ad15b --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,91 @@ +--- +title: 入門 +slug: Web/SVG/Tutorial/Getting_Started +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}

+ +

一個簡單的例子

+ +

讓我們用一個簡單的例子來進入主題,先看下面的程式碼:

+ +
<svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

複製這段程式碼,在一個文件裡貼上,給該文件起名為demo1.svg,然後用Firefox打開它,會渲染成下面截圖的樣子。(Firefox 用户: 點這裡)

+ +

svgdemo1.png

+ +

渲染過程包括以下内容:

+ +
    +
  1. 我們先看一下svg根元素: + +
      +
    • 不使用類似(X)HTML的文檔聲明,因為基於SVG的DTD會造成很多問題,弊大於利。
    • +
    • 為了明確SVG版本,version 和 baseProfile 兩個屬性必須要寫
    • +
    • 作為XML方言,SVG必須始終绑定正確的命名空間(xmlns属性)。更多資訊,請參考命名空間速成班頁面
    • +
    +
  2. +
  3. 畫一個覆蓋整個圖形的矩形 ,將背景設為红色
  4. +
  5. 在红色矩形中間畫一個綠色的圓形,半徑是80像素(圓心坐標:x軸向左偏移150像素,y軸向上偏移100像素)【坐標系統會在後面章節介紹】
  6. +
  7. 描繪“SVG”文字,字母填充成白色,通過設定錨點定義文本的中點,在這個例子裡,中點是綠色圓形的圓心,通過調整字號和垂直位置,確保最終顯示效果的美觀
  8. +
+ +

SVG文件的基本屬性

+ + + +

SVG文件的類型

+ +

SVG文件類型有兩種,普通的SVG文件是包含SVG標籤的文字文件,這類型文件的副檔名是“.svg”(全小寫)。

+ +

SVG規範支持超大體積的SVG文件,以便符合一些應用程式的使用要求(比如地理應用),所以SVG規範提供了gzip壓縮的SVG文件格式,這類文件的後缀是“.svgz”(全小寫)。不幸的是,從微軟的IIS伺服器上獲取SVG壓縮文件將會出現問題,並且,Firefox不支持本機端的SVG壓縮文件。所以,如果要使用SVG壓縮文件,你必須保證使用的是支持這種文件的服務器。

+ +

關於web服務器

+ +

現在你已經大致瞭解了如何創建SVG文件,下一步就是將SVG文件上傳到服務器上。這裡有一些問題需要注意。對於一般的SVG文件,服務器的HTTP響應端是:

+ +
Content-Type: image/svg+xml
+
+ +

對於經過壓縮的SVG文件,響應端應該是:

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+
+ +

你可以通過一些網站來檢查你的服務器是否使用了正确的響應端,比如 web-sniffer.net,提交一個SVG文件的URL,看一下響應端是什麼。如果你的服務器在響應裡没能返回上面的内容,那麼你應該聯繫一下您的主機服務商。如果他們不提供相關的配置服務,你也可以自動動手,具體方法可以查閱SVG wiki的 服務器配置頁面

+ +

服務器配置錯誤是SVG加載失敗的主要原因,所以一定要確認你的配置。如果你没有給SVG文件配置正確的服務器響應端,Firefox將會以文本的方式展示文件的標記和編碼内容,甚至要求用户選擇一个應用程序打開它。

+ +

{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}

+ +

{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started", "zh-TW":"zh-TW/SVG/Tutorial/Getting_Started" } ) }}

-- cgit v1.2.3-54-g00ecf