易經 Hexagram Unicode 符號 64 個基本圖形

易經符號通用編碼字元集相容國際性標準、地區性編碼,使用二進位六爻,找出相對應的易經六十四個基本符號圖形,對應 Unicode 字型符號十進位範圍 ䷀ ~ ䷿ 可以針對符號正確顯示應用於網頁中、及 SVG 向量圖形下載。



  • 乾為天䷀
  • 坤為地䷁
  • 水雷屯䷂
  • 山水蒙䷃
  • 水天需䷄
  • 天水訟䷅
  • 地水師䷆
  • 水地比䷇
  • 風天小畜䷈
  • 天澤履䷉
  • 地天泰䷊
  • 天地否䷋
  • 天火同人䷌
  • 火天大有䷍
  • 地山謙䷎
  • 雷地豫䷏
  • 澤雷隨䷐
  • 山風蠱䷑
  • 地澤臨䷒
  • 風地觀䷓
  • 火雷噬嗑䷔
  • 山火賁䷕
  • 山地剝䷖
  • 地雷復䷗
  • 天雷無妄䷘
  • 山天大畜䷙
  • 山雷頤䷚
  • 澤風大過䷛
  • 坎為水䷜
  • 離為火䷝
  • 澤山咸䷞
  • 雷風恆䷟
  • 天山遯䷠
  • 雷天大壯䷡
  • 火地晉䷢
  • 地火明夷䷣
  • 風火家人䷤
  • 火澤睽䷥
  • 水山蹇䷦
  • 雷水解䷧
  • 山澤損䷨
  • 風雷益䷩
  • 澤天夬䷪
  • 天風姤䷫
  • 澤地萃䷬
  • 地風升䷭
  • 澤水困䷮
  • 水風井䷯
  • 澤火革䷰
  • 火風鼎䷱
  • 震為雷䷲
  • 艮為山䷳
  • 風山漸䷴
  • 雷澤歸妹䷵
  • 雷火豐䷶
  • 火山旅䷷
  • 巽為風䷸
  • 兌為澤䷹
  • 風水渙䷺
  • 水澤節䷻
  • 風澤中孚䷼
  • 雷山小過䷽
  • 水火既濟䷾
  • ䷿火水未濟䷿



JavaScript createElementNS 建立 SVG 圖形下載

欄位以二進位輸入 1 = 陽、0 = 陰、陰爻符號「六個字元」來表示,再依照順序使用 <rect> 繪製 SVG 圖形。



八卦特殊符號,以下為頁面中使用 JavaScript 進行 SVG 元素動態建立處理方式及產生 SVG 下載的程式碼。

JavaScript 建立 SVG 子元素

使用 document.createElementNS 函數,創建具有指定的 SVG 子元素,須使用 createElementNS namespace 命名空間函數及 setAttribute 設置子元素的基本屬性。

document.createElementNS(namespaceURI, qualifiedName[, options]);

namespaceURI 指定與元素相關聯的命名空間URI的字元串。創建的元素使用 namespaceURI 進行初始化。
qualifiedName 指定創建元素類型的字符串。元素的 nodeName 屬性使用 qualifiedName 類型進行初始化。
options 可選項目、包含單個屬性的 ElementCreationOptions 對象,是預先使用 customElements.define() 自定義元素標簽名稱。新元素將被賦予屬性,其值是自定義元素的標簽名稱。

var svg = document.querySelector("SVG");
var newElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
newElement.setAttribute("x", "100");
newElement.setAttribute("y", "240");
newElement.setAttribute("width", "160");
newElement.setAttribute("height", "40");
newElement.style.fill = "#333333";
svg.appendChild(newElement);


JavaScript Save/Export 提供 SVG 下載

JavaScript 的 createElementNS 方法可以用來建立 SVG 圖形的描述。這個方法需要兩個參數 namespaceURI 和 qualifiedName。namespaceURI 是指定元素所屬的命名空間、qualifiedName 是指定元素的類型。createElementNS 方法會回傳新建的元素,可以使用 appendChild 或 insertBefore 等方法將它加入到當前網頁的文件中。

於頁面中使用 Button 按鈕及 Blob 來指引下載 <SVG> 圖形,將 createElement <a> downloadLink 附加到 document.body 並且在 click() 點選按鈕之後將其刪除,JavaScript 函數為網路上 stackoverflow.com 搜尋到的 <SVG> Download 下載方式。

JavaScript URL.createObjectURL() 靜態方法會創建 DOMString 其中包含表示參數中給出的 URL 對象。其生命周期和創建時的 document 綁定。這個新的 URL 對象表示指定的 File 對象或 Blob 對象。revokeObjectURL() 銷毀之前使用 URL.createObjectURL() 方法創建的 URL 實例。

function downloadSVG(svgElement, name) {
  svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  var svgHtmlData = svgElement.outerHTML;
  var svgFormat = '<?xml version="1.0" standalone="no"?>\r\n';
  var convertBlob = new Blob([svgFormat, svgHtmlData], {
    type: "image/svg+xml;charset=utf-8"
  });
  var svgUrl = URL.createObjectURL(convertBlob);
  var downloadLink = document.createElement("a");
  downloadLink.href = svgUrl;
  downloadLink.download = name;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}
var svg = document.querySelector("SVG");
var gFileName = currentFile + ".svg";
downloadSVG(svg, gFileName)