使用SVG基本操作API

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/09/14/7478595.html
-Advertisement-
Play Games

前面的話 本文將詳細介紹SVG基本操作API，並使用這些API製作實例效果 基礎API 在javascript中，可以使用一些基本的API來對SVG進行操作 【NS地址】 因為SVG定義在其自身的命令空間下，而不是HTML的命名空間下，可以作為單獨的XML文件存在。所以需要使用自身的NS地址 有兩個 ...


前面的話

　　本文將詳細介紹SVG基本操作API，並使用這些API製作實例效果

 

效果演示

　　下麵是利用SVG基本操作API製作的一個前端開發學習目錄。點擊中間的元素，可隨機旋轉。點擊目錄內容，可進入相關頁面。寬邊框的元素表示為二級目錄

 

基礎API

　　在javascript中，可以使用一些基本的API來對SVG進行操作

【NS地址】

　　因為SVG定義在其自身的命令空間下，而不是HTML的命名空間下，可以作為單獨的XML文件存在。所以需要使用自身的NS地址

　　有兩個常用的NS地址

var SVG_NS = "http://www.w3.org/2000/svg";
var XLINK_NS = "http://www.w3.org/1999/xlink";

【創建圖形】

document.createElementNS(SVG_NS,tagName);

【添加圖形】

element.appendChild(childElement)

【設置/獲取屬性】

element.setAttribute(name,value);
element.getAttribute(name);

【設置xlink】

　　<a>、<textPath>等標簽需要設置xlink屬性

element.setAttributeNS(XLINK_NS,'xlink:href',value);

 

封裝函數

　　將創建標簽及添加屬性的操作封閉成一個函數，方便復用

function createTag(tag,objAttr){
  var oTag = document.createElementNS('http://www.w3.org/2000/svg',tag);
      for(var attr in objAttr){
        if(attr == 'xlink:href'){
            oTag.setAttributeNS("http://www.w3.org/1999/xlink",attr,objAttr[attr]);
        }else{
            oTag.setAttribute(attr,objAttr[attr]);
        }        
      }    
  return oTag;
}

　　下麵通過該函數，創建一個圓形

<script>
function createTag(tag,objAttr){
  var oTag = document.createElementNS('http://www.w3.org/2000/svg',tag);
      for(var attr in objAttr){
        if(attr == 'xlink:href'){
            oTag.setAttributeNS("http://www.w3.org/1999/xlink",attr,objAttr[attr]);
        }else{
            oTag.setAttribute(attr,objAttr[attr]);
        }        
      }    
  return oTag;
} 
var oSvg = createTag('svg',{'version':'1.1','xmls':'http://www.w3.org/2000/svg',height:'70'});
var oCircle = createTag('circle',{'cx':'25','cy':'25','r':20,'fill':'pink'});
oSvg.appendChild(oCircle);
document.body.appendChild(oSvg);
</script>

 

實例

　　下麵通過SVG基本操作API，創建一個可交互的SVG實例

<style>
#box{
    height: 300px;
    width: 300px;
    background: hsl(20,40%,90%);
    background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
    linear-gradient(90deg,#ab4 23px,transparent 0),
    linear-gradient(90deg,#655 41px,transparent 0);
    background-size: 41px 100%,61px 100%,83px 100%;    
} 
</style>
<div id="box"></div>
<script>
var oSvg = createTag('svg',{'version':'1.1','xmls':'http://www.w3.org/2000/svg',height:'100%',width:'100%'});
var oBox = document.getElementById('box');
var W = parseInt(getComputedStyle(oBox).width);
var H = parseInt(getComputedStyle(oBox).height);
var appearance = {
    'dis':H/3,
    'r0':H/8,'r':H/10,
    'x0':W/2,'y0':H/2,
    'fontSize':H/20,
    'bg0':'hsla(0,0%,100%,.6)','bg':'hsla(0,0%,100%,.3)',
    'color0':'hsl(210,13%,30%)','color':'hsl(210,13%,30%)',
    'borderColor0':'rgba(0,0,0,0.3)','bordercolor':'rgba(0,0,0,0.3)',
    'strokWidth0':3,'strokWidth':2,
    'lineColor':'rgba(0,0,0,0.3)','lineWidth':1,'lineDashed':'5,5'
}
var data = {
    text:'前端開發',
    children:[
        {text:'HTML',url:'http://www.cnblogs.com/xiaohuochai/p/5203223.html'},
        {text:'CSS',url:'http://www.cnblogs.com/xiaohuochai/p/5249139.html'},
        {text:'JS',url:'http://www.cnblogs.com/xiaohuochai/p/5613593.html'},
        {text:'ES6',url:'http://www.cnblogs.com/xiaohuochai/p/7233392.html'},
        {text:'HTTP',url:'http://www.cnblogs.com/xiaohuochai/p/6392010.html'},
        {text:'NodeJS',url:'http://www.cnblogs.com/xiaohuochai/p/6940560.html'},
        {text:'前端工具',url:'http://www.cnblogs.com/xiaohuochai/p/6666415.html'},
    ],  
}
addChildenTags();
addCenterTag();
oBox.appendChild(oSvg);
function createTag(tag,objAttr){
  var oTag = document.createElementNS('http://www.w3.org/2000/svg',tag);
      for(var attr in objAttr){
        if(attr == 'xlink:href'){
            oTag.setAttributeNS("http://www.w3.org/1999/xlink",attr,objAttr[attr]);
        }else{
            oTag.setAttribute(attr,objAttr[attr]);
        }        
      }    
  return oTag;
} 
function addCenterTag(){
    var oG = createTag('g',{'style':'cursor:default'});
    var oCircle = createTag('circle',{'cx':appearance.x0,'cy':appearance.y0,'r':appearance.r0,'fill':appearance.bg0,'stroke':appearance.borderColor0,'stroke-width':appearance.strokWidth0});
    var oText = createTag('text',{'x':appearance.x0,'y':appearance.y0,'font-size':appearance.fontSize,'text-anchor':'middle','dominant-baseline':'middle','stroke-width':appearance.strokWidth0});
    oText.innerHTML = data.text;
    oG.appendChild(oCircle);
    oG.appendChild(oText);
    oSvg.appendChild(oG);
}
function addChildenTags(){
    var children = data.children;
    var length = children.length;
    var deg = (360/length)*(2*Math.PI)/360;
    for(var i = 0; i < children.length;i++){
        var cos = Math.cos(deg*i - 90);
        var sin = Math.sin(deg*i - 90);
        var x = appearance.x0  + appearance.dis*cos;
        var y = appearance.y0  + appearance.dis*sin;
        var oA = createTag('a',{'xlink:href':children[i].url,'target':'_black'}); 
        var oG = createTag('g',{'style':'cursor:pointer'}); 
        oG.index = i;               
        var oLine = createTag('line',{'x1':x-appearance.r*cos,y1:y-appearance.r*sin,x2:appearance.x0+appearance.r0*cos,y2:appearance.y0+appearance.r0*sin,'stroke':appearance.lineColor,'stroke-width':appearance.lineWidth,'stroke-dasharray':appearance.lineDashed,'style':'transition:.5s'});
        var oLineHelper = createTag('line',{'x1':x-appearance.r*cos,y1:y-appearance.r*sin,x2:appearance.x0+appearance.r0*cos,y2:appearance.y0+appearance.r0*sin,'stroke':'transparent','stroke-width':10});       
        var oCircle = createTag('circle',{'cx':x,'cy':y,'r':appearance.r,'fill':appearance.bg,'stroke':appearance.bordercolor,'stroke-width':appearance.strokWidth,'class':'frostedglass'});
        var oText = createTag('text',{'x':x,'y':y,'font-size':appearance.fontSize,'text-anchor':'middle','dominant-baseline':'middle','stroke-width':appearance.strokWidth,fill:appearance.color});
        oText.innerHTML = children[i].text;  
        oG.appendChild(oLine);
        oG.appendChild(oLineHelper);            
        oG.appendChild(oCircle);                  
        oG.appendChild(oText);
        oA.appendChild(oG);
        oSvg.appendChild(oA);
        oG.onmouseenter = function(){
            elasticMove(this,appearance.r*1.2);
            var line = this.children[0];
            line.removeAttribute('stroke-dasharray');
            line.setAttribute('stroke-width',appearance.lineWidth*3);
            line.setAttribute('x1',appearance.x0+(appearance.dis - appearance.r0)*Math.cos(deg*this.index - 90));
            line.setAttribute('y1',appearance.y0+(appearance.dis - appearance.r0)*Math.sin(deg*this.index - 90));
        }
        oG.onmouseleave = function(){
            elasticMove(this,appearance.r);
            var line = this.children[0];
            line.setAttribute('stroke-width',appearance.lineWidth);
            line.setAttribute('stroke-dasharray',appearance.lineDashed);
            line.setAttribute('x1',appearance.x0+(appearance.dis - appearance.r)*Math.cos(deg*this.index - 90));
            line.setAttribute('y1',appearance.y0+(appearance.dis - appearance.r)*Math.sin(deg*this.index - 90));          
        }         
    }
}
function elasticMove(obj,str){
    var circle = obj.getElementsByTagName('circle')[0];
    var r0 = circl
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【重構之法】代碼的壞味道
    壞味道意指代碼中出現的可以被改進的地方。當你嗅到壞味道的時候，也就意味著重構的時機到了。 重構對軟體內部結構的一種調整，目的是在不改變軟體可觀察行為的前提下，提高其可理解性，降低其修改成本。 ...
  • 談談服務治理
    本期我們組的技術分享，打算跟大家講講服務治理。我在上篇文章中介紹了我們美團.點評北京總部用的OCTO框架，其實在上海點評部門用的是另一套Pigeon。這兩套框架都很重。這是和我們的業務有關的，其實服務治理這個東西都創業公司到成熟的大公司都在用，只是做到的程度不同。 先說說服務治理的邊界。本質上任何能 ...
  • 零件組裝技術——建造者模式深度解析
    建造者模式是最後一個創建型設計模式，也是研究對象的創建。 將一個複雜對象的創建與它的表示分離，使得同樣的構建過程可以創建不同的表示。 創建和表示是什麼意思 ？ 表示就是外在，對象具體的樣子，而內部構建過程是一種組裝的概念，有點像套娃，同樣的結構，但是卻產生了不同大小的樣子。 按照慣例，先講故事。 假 ...
  • 淺談控制反轉，依賴註入與依賴查找
    今天要講的是以下三個概念： - 控制反轉 ：IoC, Inversion of Control - 依賴註入：DI, Dependency Injection - 依賴查找：DL, Dependency Lookup, Service Locator 什麼是控制反轉 先說正常的控制流程是怎樣的： 比 ...
  • .NET及.NET Core系統架構
    .NET 官方架構指南 Microservices and Docker Containers Web Applications with ASP.NET 官網地址：https://www.microsoft.com/net/learn/architecture 三層及多層架構 Multitier ...
  • 學會資料庫讀寫分離、分表分庫——用Mycat，這一篇就夠了！
    系統開發中，資料庫是非常重要的一個點。除了程式的本身的優化，如：SQL語句優化、代碼優化，資料庫的處理本身優化也是非常重要的。主從、熱備、分表分庫等都是系統發展遲早會遇到的技術問題問題。Mycat是一個廣受好評的資料庫中間件，已經在很多產品上進行使用了。希望通過這篇文章的介紹，能學會Mycat的使用 ...
  • js垃圾回收機制理解
    原理 找到不再被使用的變數，然後釋放其占用的記憶體，但這個過程不是時時的，因為其開銷比較大， 所以垃圾回收器會按照固定時間間隔周期性的執行 回收方式 a.標記清除 當變數進入環境時，將這個變數標記為“進入環境”;當變數離開環境時，則將其標記為“離開環境”。 標記“離開環境”的就回收記憶體 b.引入計數( ...
  • css 寬高自適應的div 元素 如何居中 垂直居中
    在我們 編寫css 樣式的時候經常會遇見一個問題 那就是一個 寬高未知的元素 要讓他 垂直居中如何實現這個呢 下麵是我常用的兩種方法 上代碼 下麵的是 結構代碼 <div class="wrap">//此處為父組件 我們會設置父級的寬高並讓其居中 <div class="center">//子組件我 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類