Question

我有这段代码：

function MyClient() {
    var personPath = "M255.968,166.154c34.206,0,61.936-27.727,61.936-61.934c0-34.208-27.729-61.936-61.936-61.936s-61.936,27.728-61.936,61.936 C194.032,138.428,221.762,166.154,255.968,166.154z M339.435,194.188c-13.082-13.088-28.625-20.924-84.83-20.924 c-56.214,0-71.38,8.505-83.796,20.924c-12.422,12.416-8.23,144.883-8.23,144.883l27.485-65.304l17.28,194.554l49.856-99.57 l46.521,99.57l16.456-194.554l27.487,65.304C347.664,339.07,352.521,207.271,339.435,194.188z";

    var self = this,
    width = $('#canvas').width(),
    mapCanvasHeight = (width * 0.75);

    this.init = function() {
        self.drawCanvas();
        self.drawRect();
        self.drawPerson();
    }

    this.drawCanvas = function () {

        // we add the svg to the #canvas id.

        self.svg = d3.select('#canvas').append('svg:svg')
        .attr("width", "100%")
        .attr("height", "100%")
        //.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight);
    }

    this.drawRect = function () {
            self.svg.append("rect")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", width)
                .attr("height", mapCanvasHeight)
                .attr("fill", "black");
        }

    this.drawPerson = function () {
        self.svg.append("path")
            .attr("d", personPath)
            .attr("fill", "white")
            .attr("transform", function() {
                 return "scale(0.08) translate(" + 0 + "," + 0 + ")"; });
    }
    this.init();
};

var MyClient;
jQuery(function() {
    MyClient = new MyClient();
});

如何定位drawPerson以使其正确对齐左上角？

你可以在这里看到它：http://jsfiddle.net/SuTZR/

任何建议非常感谢

Answer 1

好吧，我不得不改变inkscape上的原始svg绘图，以便路径偏移到左上角，这是新的personPath：

"m 1.4194515,-160.64247 c 33.5874165,0 60.8159465,-25.97005 60.8159465,-58.00952 0,-32.0404 -27.22755,-58.0114 -60.8159465,-58.0114 -33.5883965,0 -60.8159415,25.971 -60.8159415,58.0114 0,32.0404 27.228527,58.00952 60.8159415,58.00952 z m 81.9575765,26.25762 C 70.531608,-146.64352 55.269688,-153.983 0.08110256,-153.983 c -55.19742156,0 -70.08915856,7.96609 -82.28062656,19.59815 -12.197359,11.62926 -8.081167,135.7024419 -8.081167,135.7024419 L -63.292733,-59.848397 -46.325227,122.37766 2.6291765,29.116913 48.308878,122.37766 64.467298,-59.848397 91.457218,1.3175919 c 0,-8e-4 4.76917,-123.4484419 -8.08019,-135.7024419 z"

svg路径对齐

1 个答案: