Raphael 路径调整大小并相对于容器移动

我正在尝试缩放/移动使用 Raphael api 创建的 SVG 路径。我希望路径能够整齐地适合容器，无论容器有多大。我已经搜索了参考资料、网络，但我仍然在努力让它发挥作用。

如果有人能告诉我为什么这不起作用，我会很高兴。

这个小提琴向你展示了我在做什么：http://jsfiddle.net/tolund/3XPxL/5/

JavaScript：

var draw = function(size) {
    var $container = $("#container").empty();
    $container.css("height",size+"px").css("width",size+"px");

    var paper = Raphael("container");

    var pathStr = "M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,"+
        "0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,"+
        "1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z";

    // set the viewbox to same size as container
    paper.setViewBox(0, 0, $container.width(), $container.height(), true);

    // create the path
    var path = paper.path(pathStr)
        .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 });

    // get the path outline box (may be different size than view box.
    var box = path.getBBox();

    // move the path as much to the top/left as possible within container
    path.transform("t" + 0 + "," + 0);

    // get the width/height based on path box relative to paper (same size as container)
    var w = (paper.width) / box.width;
    var h = (paper.height) / box.height;

    // scale the path to the container (use "..." to compound transforms)
    path.transform('...S' + w + ',' + h + ',0,0');
}

$(function() {
    var currentSize = 30;
    draw(currentSize);

    $("#smaller").click(function(){ 
        currentSize = currentSize < 10 ? currentSize : currentSize * 0.5;
        draw(currentSize);
    });
    $("#bigger").click(function(){ 
        currentSize = 300 < currentSize ? currentSize : currentSize * 2; 
        draw(currentSize);
    });
});

HTML:

<button id="smaller">-</button>
<button id="bigger">+</button>

<div id="container" style="border: 1px #ddd solid; margin: 30px">

</div>

谢谢， 托盖尔。

我认为您的问题是对视图框用途的根本误解。在代码中，您尝试设置 svg 元素的视图框，使其与屏幕的坐标空间匹配，然后转换路径以匹配该坐标空间。没有任何技术原因你不能这样做，但它确实有效地将“可扩展”从“可扩展矢量图形”中剔除出来。视图盒的全部目的是使矢量坐标空间和屏幕之间相对平移。

那么，解决问题的最佳方法不是转换路径以匹配 SVG 元素，而是使用视图框让 SVG 固有的可扩展性为您完成此操作。

首先要做的事情是：创建您的路径，以便我们有一个可以使用的对象。此时我们并不关心视图框是什么。

var pathStr = "...";  // The content of the path and its coordinates are completely immaterial

var path = paper.path(pathStr)
    .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 });

现在我们需要做的就是使用视图框将 SVG“聚焦”在我们感兴趣的坐标空间上。

var box = path.getBBox();    
var margin = Math.max( box.width, box.height ) * 0.1;  //  because white space always looks nice ;-)
paper.setViewBox(box.x - margin, box.y - margin, box.width + margin * 2, box.height + margin * 2);   

就是这样。 SVG（无论其大小）将从视图框中指定的内部坐标转换为屏幕上的物理坐标。

这是你的小提琴叉子概念验证.