Question

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

我想使用嵌入到HTML中的SVG元素而不是存储光栅图像。并且降价处理这一切（如果svg包含在div元素中）。

然而，SVG格式本身并不像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也会这样做......

Answer 1

我不知道任何Markdown-to-SVG解析器，但是构建它不是很难。

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

enter image description here

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

（此Svg类的代码在下面进一步说明）

这个Svg类知道如何执行这些SVG任务：

创建父html svg元素（new 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;
})();

用于SVG的Markdown模拟

1 个答案: