Question

我正在使用Node.js将D3图表保存到文件中。代码将SVG标记作为全部大写而不是小写标记返回：

<SVG height="300" width="460" xmlns="http://www.w3.org/2000/svg">
        <G transform="translate(230,150)">
            <PATH d="M6.123031769111886e-15,-100A100,100 0 0,1 90.12430862004372,43.33138580473872L45.06215431002186,21.66569290236936A50,50 0 0,0 3.061515884555943e-15,-50Z" fill="#1f77b4"/>
            <PATH d="M90.12430862004372,43.33138580473872A100,100 0 0,1 4.27399232527422,99.90862319941907L2.13699616263711,49.954311599709534A50,50 0 0,0 45.06215431002186,21.66569290236936Z" fill="#aec7e8"/>
            <PATH d="M4.27399232527422,99.90862319941907A100,100 0 0,1 -64.73671010012329,76.21783495621347L-32.368355050061645,38.10891747810673A50,50 0 0,0 2.13699616263711,49.954311599709534Z" fill="#ff7f0e"/>
            <PATH d="M-64.73671010012329,76.21783495621347A100,100 0 0,1 -99.89978970073908,-4.4757142165364L-49.94989485036954,-2.2378571082682A50,50 0 0,0 -32.368355050061645,38.10891747810673Z" fill="#ffbb78"/>
            <PATH d="M-99.89978970073908,-4.4757142165364A100,100 0 0,1 -1.836909530733566e-14,-100L-9.18454765366783e-15,-50A50,50 0 0,0 -49.94989485036954,-2.2378571082682Z" fill="#2ca02c"/>
        </G>
    </SVG>

node.js脚本：

require('d3');
var xmldom = require('xmldom');

var dataset = {
    apples: [53245, 28479, 19697, 24037, 40245],
};

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function (d, i) {
    return color(i);
})
    .attr("d", arc);
var svgObject = d3.select("svg").attr('xmlns', 'http://www.w3.org/2000/svg');
var xml = new xmldom.XMLSerializer().serializeToString(svgObject[0][0]);

console.log(xml);

如何将标记名称作为小写名称（SVG需要）？

Answer 1

不幸的是xmldom现在似乎不支持这个lowerCase选项。

所以你可以ask for it on github或者在此期间分享你自己的模块版本。

您必须更改此行以获取标记名称的小写版本：

https://github.com/jindw/xmldom/blob/master/dom.js#L919

使用

var nodeName = node.localName;

而不是

var nodeName = node.tagName;

Answer 2

如果它真的是你想要的字符串，你可以尝试使用REGEXP，一个例子（现在阻止cdata中的小写）：

function dom_string_lower(ds){
    var cd = {}, //var to backup cdata contents
        i = 0,//key integer to cdata token
        tk = String(new Date().getTime());//cdata to restore

    //backup cdata and attributes, after replace string by tokens
    ds = ds.replace(/\<!\[CDATA\[.*?\]\]\>|[=]["'].*?["']/g, function(a){
        var k = tk + "_" + (++i);
        cd[k] = a;
        return k;
    });

    //to lower xml/html tags
    ds = ds.replace(/\<([^>]|[^=])+([=]| |\>)/g, function(a, b){
        return String(a).toLowerCase();
    });

    //restore cdata contents
    for(var k in cd){
        ds = ds.replace(k, cd[k]);
    }

    cd = null;//Clean variable
    return ds;
}

var xml = new xmldom.XMLSerializer().serializeToString(svgObject[0][0]);
console.log( dom_string_lower(xml) );

//test case
var test = "<SVG TITLE=\"ABC\"><ABC >A</ABC><test><![CDATA[TEST CASE]]></test></SVG>";
console.log( dom_string_lower(test) );

希望有所帮助。

使用Node.js中的xmldom.XMLSerializer获取小写标记名称

2 个答案: