Raphael camino cambiar el tamaño y mover en relación con el contenedor

Estoy tratando de escalar / mover una ruta SVG creada con la API de Raphael. Quiero que el camino encaje perfectamente dentro de un contenedor, sin importar el tamaño del contenedor. He buscado en la referencia, en la web y todavía estoy luchando para que esto funcione.

Si alguien me puede decir por qué esto no funciona, estaría muy feliz.

Este violín te muestra lo que estoy haciendo: 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:

   

Gracias, Torgeir.

Creo que su problema es un malentendido fundamental de para qué sirve el cuadro de vista. En su código, está intentando configurar el cuadro de vista del elemento svg para que coincida con el espacio de coordenadas de la pantalla y luego transformar la ruta para que coincida con ese espacio de coordenadas. No hay ninguna razón técnica por la que no pueda hacer esto, pero efectivamente elimina el “Escalable” de los “Gráficos vectoriales escalables”. El punto completo del cuadro de vista es hacer que la traducción entre el espacio de coordenadas del vector y la pantalla sea relativa.

La mejor manera de resolver su problema, entonces, no es transformar la ruta para que coincida con el elemento SVG, sino usar el cuadro de vista para permitir que la escalabilidad intrínseca de SVG haga esto por usted.

Lo primero es lo primero: crea tu ruta para que tengamos un objeto con el que trabajar. No nos importa lo que el viewbox es en este punto.

 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 }); 

Ahora todo lo que tenemos que hacer es usar el cuadro de vista para “enfocar” el SVG en el espacio de coordenadas en el que estamos interesados.

 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); 

Y eso es. El SVG (independientemente de su tamaño) se traducirá de las coordenadas internas especificadas en el cuadro de visualización a sus coordenadas físicas en la pantalla.

Aquí hay una bifurcación de su violín como prueba de concepto .