易經 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)