2

我正在使用降价格式来表示我网站页面上的内容（文章、问题陈述）。现在我有时想在文本中添加一些图片或绘图。

我想使用嵌入到 HTML 中的 SVG 元素而不是存储光栅图像。Markdown 可以处理这个（如果 svg 包含在 div 元素中）。

然而，SVG 格式本身并不像 markdown 那样简单，我现在想知道是否存在一些类似 markdown 的处理器，它可以接受一些简单格式的命令，例如：

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和canvas也可以......

4

1 回答 1

7

我不知道任何 Markdown-to-SVG 解析器，但构建一个并不难。

这是一个小提琴演示：http: //jsfiddle.net/m1erickson/aPg8a/

在此处输入图像描述

从一个知道如何在 javascript 中创建 SVG 元素的 Svg “类”开始

（这个 Svg 类的代码在下面）

这个 SVG 类知道如何完成这些 SVG 任务：

  • 创建一个父 html svg 元素（新 Svg）
  • 设置 svg 元素的大小 ( .setSvgWidthHeight )
  • 为任何新的 SVG 形状 (.setColor) 设置默认笔触颜色
  • 为任何新的 SVG 形状设置默认填充颜色 ( .setFill )
  • 创建一个 rect 对象并将其添加到 svg 元素 ( .rect )
  • 创建一个圆形对象并将其添加到 svg 元素 ( .circle )

首先，创建一些示例降价：

（假设所有降价都是格式正确且有效的）

// 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 类将每个 Markup 命令处理成关联的 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;
})();
于 2013-10-29T16:50:32.020 回答