使用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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類