SVG降價模擬

Question

我使用markdown格式來表示我網站頁面上的內容（文章，問題陳述）。現在我想要添加一些圖片或圖紙有時文字。

我想使用嵌入到HTML而不是存儲柵格圖像的SVG元素。並且降價處理這一切都是正確的（如果svg包含在div元素中）。

然而，SVG格式本身是沒有降價那麼簡單，我現在想知道，是否存在一些降價般的處理器，可以採取命令在一些簡單的格式，如：

svg 200, 150 
set-color black 
set-fill none 
rect 0, 0, 200, 150 
set-color #C00 
set-fill #F00 
circle 100, 75, 50 

並將其轉換爲svg元素。有人遇到過類似的東西嗎？

我認爲JavaScript和畫布也會做，如果有他們這樣的降價樣處理器...

Answer 1

我不知道任何降價至SVG解析器，但它不是很難建立一個。

這裏有一個小提琴演示：http://jsfiddle.net/m1erickson/aPg8a/

開始與一個SVG「類」，它知道如何創建SVG元素在javascript

（代碼這個Svg爲類下面進一步）

此Svg類知道如何執行這些SVG任務：

• 創建一個父HTML SVG元素（新SVG）
• 設置svg元素的大小（.setSvgWidthHeight）
• 設置任何新的SVG形狀默認筆劃顏色（.setColor）
• 設置默認填充顏色爲任何新的SVG形狀（.setFill）
• 創建一個矩形對象，並將其添加到SVG元素（.rect）
• 創建一個圓對象，並將其添加到SVG元素（。圓）

首先，創建了一些示例降價：

（假定所有降價是良好和有效）

// svg 200, 150 
// set-color black 
// set-fill none 
// rect 0, 0, 200, 150 
// set-color #C00 set-fill #F00 
// circle 100, 75, 50 

// sample markdown text 

var markdown="svg 200, 150\nset-color black\nset-fill none\nrect 0, 0, 200, 150\nset-color #C00\nset-fill #F00\ncircle 100, 75, 50\n" 

然後解析該降價這樣的：

// create a new Svg object 
// this object knows how to create SVG elements 

var svg=new Svg(); 

// strip off trailing return, if present 
if(markdown.slice(-1)=="\n"){ 
    markdown=markdown.slice(0,-1); 
} 

// split markdown into individual commands 
var commands=markdown.split("\n"); 

最後，使用SVG的類每個標記命令處理到關聯的SVG

// process each command in commands using the svg object 

for(var i=0;i<commands.length;i++){ 
    processCommand(svg,commands[i]); 
    console.log(commands[i]); 
} 


// this function takes a line of Markup and executes the associated Svg command 


function processCommand(svg,commandline){ 

    // get command and remove command from commandline 

    var command=(commandline.split(" ")[0]).toLowerCase(); 
    commandline=commandline.substr(commandline.indexOf(" ")+1).trim(); 

    // get args (assuming comma/space delimiters) 

    var args=commandline.split(/[ ,]+/); 

    // execute the command with svg 

    switch(command){ 
     case "svg": 
      svg.setSvgWidthHeight(args[0],args[1]) 
      break; 
     case "set-color": 
      svg.setColor(args[0]) 
      break; 
     case "set-fill": 
      svg.setFill(args[0]) 
      break; 
     case "rect": 
      svg.rect(args[0],args[1],args[2],args[3]) 
      break; 
     case "circle": 
      svg.circle(args[0],args[1],args[2]) 
      break; 
     default: 
      break; 
    } 

} 

下面是一個SVG「類」對象爲您開始：

var Svg = (function() { 

    // constructor 
    function Svg() { 
     this.svgns="http://www.w3.org/2000/svg"; 
     this.xlink='http://www.w3.org/1999/xlink' 
     this.nextId=1000; 
     this.fill="gray"; 
     this.stroke="black"; 
     this.strokeWidth=2; 
     this.width =1; 
     this.height=1; 
     this.svg=document.createElementNS(this.svgns,"svg"); 
     this.svg.setAttribute('width', this.width); 
     this.svg.setAttribute('height', this.height); 
     document.body.appendChild(this.svg); 
    } 
    // 
    Svg.prototype.create = function(elementType,fill,stroke,strokeWidth,id){ 
     var e=document.createElementNS(this.svgns,elementType); 
     e.setAttribute("id",id||this.nextId++); 
     e.setAttribute("fill",fill||this.fill); 
     e.setAttribute("stroke",stroke||this.stroke); 
     e.setAttribute("stroke-width",strokeWidth||this.strokeWidth); 
     this.svg.appendChild(e); 
     return(e); 
    } 
    // 
    Svg.prototype.setSvgWidthHeight = function(width,height){ 
     this.svg.setAttribute("width",width); 
     this.svg.setAttribute("height",height); 
     return(this); 
    } 
    // 
    Svg.prototype.rect = function (x,y,width,height) { 
     var e=this.create("rect"); 
     e.setAttribute("x",x); 
     e.setAttribute("y",y); 
     e.setAttribute("width",width); 
     e.setAttribute("height",height); 
     e.setAttribute("fill",this.fill); 
     e.setAttribute("stroke",this.stroke); 
     return(this); 
    }; 
    // 
    Svg.prototype.setFill = function(fillcolor){ 
     this.fill=fillcolor; 
     return(this); 
    } 
    // 
    Svg.prototype.setColor = function(strokecolor){ 
     this.stroke=strokecolor; 
     return(this); 
    } 
    // 
    Svg.prototype.circle = function (cx,cy,radius) { 
     var e=this.create("circle"); 
     e.setAttribute("cx",cx); 
     e.setAttribute("cy",cy); 
     e.setAttribute("r",radius); 
     e.setAttribute("fill",this.fill); 
     e.setAttribute("stroke",this.stroke); 
     return(this); 
    }; 

    return Svg; 
})();