dz網(wǎng)站收款即時到賬怎么做的保定網(wǎng)站建設(shè)報價
譯注
由于 1.2.2 小節(jié)介紹 SVG 的篇幅過多，為了方便查閱，后續(xù)將分多個小節(jié)依次進行翻譯。為了確保整個 1.2.2 小節(jié)的完整性，特意將上一篇包含的 SVG 小節(jié)的內(nèi)容整理出來重新編排。敬請留意。
1.2.2 SVG - 可縮放矢量圖形
可伸縮矢量圖形（Scalable Vector Graphics，即 SVG）的引入從根本上改變了網(wǎng)絡(luò)的面貌。SVG 圖形在短短幾年內(nèi)就成為了主要的 Web 開發(fā)工具。與柵格圖形（如 PNG 和 JPG 格式圖片）由微小像素構(gòu)成、并且像素點在放大倍數(shù)過高時清晰可見的設(shè)計理念不同，矢量圖形則是基于數(shù)學和幾何學構(gòu)建而成的，能夠在任何尺寸、任何屏幕分辨率下保持清晰的外觀。SVG 圖形的另一個重要優(yōu)勢是可以直接注入到 DOM 中，不僅可以讓開發(fā)人員直接操作該元素并添加動畫效果，而且還可以供屏幕閱讀器訪問。如果構(gòu)建得當，SVG 圖形也能具備高性能，其文件大小僅為相同效果的柵格圖像的一小部分。
用 D3 來創(chuàng)作數(shù)據(jù)可視化作品，通常會將 SVG 圖形注入 DOM，通過修改它們的 attribute 屬性來生成各種可視化視覺元素。了解 SVG 的工作原理、主要圖形及其主導視覺呈現(xiàn)的 attribute 屬性，對大多數(shù) D3 項目而言至關(guān)重要。本節(jié)后續(xù)內(nèi)容將逐一介紹整個 D3 項目中會被反復重用的 SVG 形狀。如果您對 SVG 還不太熟悉，請務必花點時間與我們一起敲敲代碼。我們承諾這將大幅降低您未來使用 D3 的難度。
如何訪問代碼文件
本書的每一章都包含了編程練習（code-along exercises），旨在進一步提升學習體驗。強烈建議您在閱讀本書時“動手”實踐，而不僅僅滿足于“閱讀”學習。完成每一章設(shè)置的練習環(huán)節(jié)，可以讓您更好地消化吸收所學知識，并盡快開始構(gòu)建您自己的 D3 項目。
對于每個練習項目，您都可以訪問現(xiàn)成的源代碼文件，在本書的
Github倉庫（http://mng.bz/Xqjv）中找到它們。如果熟悉Git，還可以克隆該倉庫到您本地計算機，或者下載對應的壓縮文件。
示意圖：從 GitHub 倉庫下載源碼文件每個章節(jié)都有各自的文件夾，包含一個或多個練習。每個練習都按章節(jié)順序進行了編號。練習包括一個
start文件夾，其中包含開始練習所需的所有文件；而在end文件夾中有對應練習的完整參考答案。根據(jù)您在每一章、各個小節(jié)的學習進展，您既可以沿用上一小節(jié)練習后的代碼，也可以使用與當前小節(jié)對應的代碼文件夾進行練習，兩種方式殊途同歸。
先從矢量圖開始。根據(jù)本書提供的源碼文件，找到 chapter_01/SVG_Shapes_Gallary 下的 end 文件夾，在 index.html 文件上單擊鼠標右鍵，從 打開方式（Open with） 菜單項選擇一個瀏覽器。推薦使用 Chrome 或 Firefox 瀏覽器， 因為它們有出色的檢查工具（inspector tools）。文件將從一個新的瀏覽器標簽頁打開，并看到如圖 1.8 所示的矢量圖。您也可以從托管到 GitHub 上的在線項目瀏覽這些 SVG 圖形（http://mng.bz/yZmB）。
圖 1.8 本節(jié)待構(gòu)建的基本 SVG 圖形
您看到的這些都是今后用 D3 構(gòu)建可視化項目時最常用的一些 SVG 圖形，包括：直線（lines）、矩形（rectangles）、圓形（circles）、橢圓（ellipses）、路徑（path）和文本（text）。
使用時，通常需要告訴 D3 哪些形狀需要追加到 DOM 中，以及需要包含哪些視覺呈現(xiàn)屬性，以便找出與這些尺寸、顏色及位置信息相匹配的理想圖形。接下來的練習環(huán)節(jié)將通過代碼來逐一創(chuàng)建圖 1.8 中展示的 SVG 圖形。我們不妨將該練習稱為 SVG 畫廊（Gallery of SVG Shapes）。通過此次練習，您將進一步了解入手 D3 項目需要掌握的所有 SVG 相關(guān)的基礎(chǔ)知識。
用您習慣的代碼編輯器打開練習項目 SVG_Shapes_Gallery 下位于 start 文件夾內(nèi)的 index.html 文件。推薦使用 VS Code 編輯器——一款免費又好用的多功能代碼編輯器，擁有許多前端開發(fā)需要的實用工具。
如代碼清單 1.1 所示，index.html 是一個簡單的 HTML 文件。如果用瀏覽器打開（鼠標右鍵單擊文件，從 打開方式（Open With） 菜單選擇一款瀏覽器即可）將看到一片空白，因為 <body> 元素是空的。下一小節(jié)，將給 <body> 元素添加各類 SVG 圖形。
代碼清單 1.1 練習項目 SVG 畫廊的初始 HTML 文件
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Shapes Gallery | D3.js in Action</title>
</head>
<body></body>
</html>
如何查找更多信息
后續(xù)內(nèi)容將介紹多個 SVG 元素及其
attribute屬性。作為前端開發(fā)人員，常常會借助一些在線資源來構(gòu)建項目、引入不太熟悉的 SVG 元素、或者尋找某個 JavaScript 功能來實現(xiàn)特定操作。MDN 在線文檔（MDN Web Docs，詳見 https://developer.mozilla.org/）就是這樣一個可靠且全面的資源，其中包含了大量通俗易懂并且支持修改的實用示例，如 SVG 元素及其屬性用法、CSS 樣式屬性以及 JavaScript 函數(shù)等。
1 響應式 SVG 容器
在 SVG 的圖形世界中，<svg> 容器是用于繪圖的白板。每個 SVG 形狀都嵌套在該 <svg> 父元素中。想查看實際效果，編輯 index.html 文件并在 <body> 元素內(nèi)添加一個 SVG 容器，然后在瀏覽器中重新加載該頁面。目前還看不到任何內(nèi)容：
<body><svg></svg>
</body>
打開瀏覽器的檢查工具（在瀏覽器窗口中右鍵單擊并選擇 檢查（Inspect））。在檢查窗口中會看到組成當前頁面的 DOM 結(jié)構(gòu)。找到 <svg></svg> 容器（又稱 SVG 節(jié)點）。將鼠標移動到檢查窗口內(nèi)的容器上，SVG 元素就會在頁面上高亮顯示，如圖 1.9 所示：
圖 1.9 從 DOM 樹選中 SVG 節(jié)點，并在視口中高亮顯示
默認情況下，瀏覽器中的 SVG 容器寬 300px 像素、高 150px 像素，但可以通過給 attribute 屬性賦值進行調(diào)整。此時的 attribute 屬性就是用來提供 HTML 元素的附加信息。在 SVG 行內(nèi)元素中（With inline SVG），主要是通過 attribute 屬性來設(shè)置構(gòu)成 SVG 圖形的各個形狀的尺寸及位置信息。
例如，可以設(shè)置 SVG 元素的寬度（width）和高度（height）屬性（attribute）。返回文本編輯器，向 SVG 容器添加一個 width 和 height 屬性，屬性值分別設(shè)為 900 和 300，然后保存：
<svg width="900" height="300"></svg>
在瀏覽器中重新加載項目，并在檢查工具中定位 SVG 節(jié)點。請注意，現(xiàn)在 SVG 元素上出現(xiàn)了寬度和高度屬性。如果將鼠標懸停在 DOM 樹的 SVG 節(jié)點上，還將看到視口中的 SVG 容器此時的大小為 900px × 300px，如圖 1.10 所示：
圖 1.10 SVG 節(jié)點通過屬性來指定大小
為了方便查看 SVG 容器，不必每次從檢查工具高亮展示，不妨給它加上一個邊框。向 SVG 元素添加一個 style 屬性（attribute），并插入 CSS 邊框?qū)傩?#xff08;property）。如以下代碼片段所示，通過邊框簡寫屬性（property）來創(chuàng)建一個寬 1px 像素的黑色實線邊框：
<svg width="900" height="300" style="border:1px solid black;"></svg>
保存并重新加載頁面，確認 SVG 容器周圍存在邊框；再調(diào)整瀏覽器窗口大小，直到小于 SVG 容器?？梢钥吹?SVG 容器保持固定寬高，不會適應瀏覽器窗口大小。接下來，嘗試讓 SVG 容器變?yōu)轫憫饺萜鳌?/p>
前面將 SVG 的 attribute 屬性設(shè)置為絕對值（900 和 300），瀏覽器以像素為單位將其解析為相應的測量值（900px 和 300px）；這里也可以使用百分比。回到文本編輯器中，將寬度改為相對值 100%，保存后重新加載頁面：
<svg width="100%" height="300" style="border:1px solid black;"></svg>
再次調(diào)整瀏覽器窗口大小，留意 SVG 是如何占據(jù)整個可用寬度、并同時保持固定高度 300px 的。情況好多了，只是容器的原始寬高比（aspect ratio）也丟失了。
要讓 SVG 元素變?yōu)轫憫皆O(shè)計，可以使用 viewBox 屬性（viewBox attribute）。刪除編輯器中的 width 和 height 屬性，并將其替換為 viewBox 屬性，賦值為 "0 0 900 300"：
<svg viewBox="0 0 900 300" style="border:1px solid black;"></svg>
再次調(diào)整瀏覽器窗口大小進行驗證。注意到了嗎？此時 SVG 容器在保持寬高比 900:300 不變的情況下適應了任何屏幕尺寸，從而得到一個響應式的 SVG！
正如您看到的那樣，viewBox 屬性由四個屬性值組成。前兩個數(shù)值指定了 viewBox 的坐標系原點（x 和 y）。本書將統(tǒng)一使用 0 0，知道這些值可以調(diào)整 SVG 容器在屏幕的可見部分還是很有幫助的。viewBox 后兩個數(shù)值分別指定了寬度（width）和高度（height）。它們定義了 SVG 的寬高比，并確保它能完美適應任何容器并作相應縮放而不致失真。
（未完待續(xù)）