RaphaelJS应用自定义转换

Question

我在将SVG中的每个路径应用转换时遇到问题。我知道我需要添加的确切变换，因为我正在使用来自维基媒体的地图并通过使用firebug / chromebug添加它来测试它。

我需要添加：

transform="translate(0,239) scale(0.016963,-0.016963)"

这是我所拥有的一个例子： http://jsfiddle.net/m7t4X/1/

如果你检查它，每条路径都是这样的：

<path fill="#ff0000" stroke="#ccc6ae" d="M16760,5958C16752,5945,16745,5920,16743,5901C16740,5859,16734,5853,16710,5868C16694,5878,16690,5878,16690,5866C16690,5858,16696,5849,16703,5846C16709,5843,16705,5843,16693,5846C16670,5851,16666,5845,16669,5808C16670,5799,16666,5789,16660,5785C16655,5782,16650,5770,16650,5760C16650,5747,16645,5743,16635,5746C16626,5750,16620,5746,16620,5737C16620,5717,16549,5667,16495,5649C16473,5642,16451,5632,16446,5628C16440,5624,16426,5620,16413,5620C16395,5620,16390,5615,16390,5593C16390,5577,16381,5552,16371,5536C16351,5506,16351,5482,16371,5367C16383,5300,16383,5298,16354,5242C16338,5211,16321,5182,16317,5179C16282,5154,16269,5063,16294,5016C16302,5000,16306,4972,16303,4946C16300,4920,16302,4900,16309,4896C16315,4892,16320,4881,16320,4871C16320,4849,16350,4820,16373,4820C16382,4820,16390,4816,16390,4810C16390,4795,16442,4799,16464,4815C16475,4823,16496,4830,16511,4830C16541,4830,16580,4870,16580,4899C16580,4908,16586,4924,16594,4935C16601,4946,16613,4980,16620,5010C16628,5040,16642,5081,16651,5101C16661,5121,16675,5159,16681,5186C16688,5213,16710,5278,16731,5332C16752,5385,16772,5446,16775,5467C16787,5539,16790,5550,16803,5547C16815,5545,16816,5554,16804,5630L16797,5675L16817,5651L16837,5626L16854,5658C16866,5682,16868,5695,16860,5709C16855,5720,16850,5749,16850,5773C16850,5797,16845,5832,16839,5851C16825,5895,16786,5979,16780,5980C16777,5980,16768,5970,16760,5958Z" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;"></path>

如果我通过firebug等手动添加它以将开头更改为如下所示：

<path  transform="translate(0,239) scale(0.016963,-0.016963)" fill="#ff0000" stroke="#ccc6ae" d="

然后它完美地运作。我无法复制这个。

我尝试了各种添加转换的方法，但没有一种方法可以完全发挥作用。 从我收集的内容来看，RaphaelJS是向后兼容的，所以我找到的所有解决方案（无论如何还没有完全发挥作用）都不适用于任何旧的IE。

我尝试的第一件事就是改变：

paper.setViewBox(0, 0, w, h, true);

为：

paper.setViewBox(true);

然而，这对我正在使用的形状（http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg）

无效

这是我获得转换量的地方（如果你查看源代码，可以看到）。

请告知我出错的地方，以及如何添加此内容。

非常感谢！

---------------------------------编辑---------- ---------------------------

在应用下面的修复程序后，我发现它似乎显示SVG旋转180度并水平翻转。我也不太明白为什么。

这就是它的外观：

这就是它的出现方式：

（尽管被引用，我也注意到我在南美洲失踪了）

这是目前看来的一个新的小提琴：

http://jsfiddle.net/wrayvon/m7t4X/3/

再次感谢

Answer 1

转换应该有效，但我认为您只需要为viewBox设置更大的宽度/高度。这些应该用于坐标空间，而不是屏幕上的像素。

var w = 15000;
var h = 25000;

paper.setViewBox(10000, 0, w, h, true);

应该这样做。您也可以根据需要对其进行转换，方法是在创建时向元素添加以下内容。

.transform('t2000,1000') 

编辑：当你更改了SVG ...如果原版中有变换，你可能需要对元素应用相同的变换......所以像这样的一行......

var c = paper.path(worldmap.shapes[country]).attr({ stroke: "#ccc6ae", fill: "#ff0000", "stroke-opacity": 1 }).transform('s1,-1,13000,10000');

我只是猜测中心点可以从那里扩展（13,000,10,000可能更多），你需要单独计算。

或者您可以根据原始SVG匹配比例，然后您可能不需要更改viewBox（除了匹配原始）。

原始jsfiddle

更新了jsfiddle

Answer 2

我在完全相同的问题上取得了成功。你的问题是对它的最清晰的阐述。

作为一个背景，我找到了美国及其所有县的SVG地图。我想，“太好了，我只是将这些路径复制到拉斐尔，鲍勃是你的叔叔”。所以，我做了，但在导入后它看起来完全颠倒了。我考虑过对路径应用一些数学，但决定反对它。相反，我也调查了transform（）选项。

在转换方法中，有几个选项。其中一个选项是使用矩阵（“m”）。矩阵方法有6个选项。 - 见here 更多细节。但是“as-the-path”指令的矩阵设置是这样的：

.transform("m1,0,0,1,0,0");

如果您将第4位置为负数，则会反转您的图像。

.transform("m1,0,0,-1,0,0");

但是......它必须选择要翻转的轴的位置。据我所知，这是容器div的上边缘。所以你的形象现在在你之上。使用视图框查找并根据需要进行缩放：

R.setViewBox(x,y,x-size,y-size);//The Y (second param) will need to be negative.

这是我找到自己形状的例子:(将你的200分变为1000分，以便更容易找到你的形象，然后用数字来中心，然后放大）

R.setViewBox(0,-575,200,200);

使用变换的缺点是绘制，然后重新定位图像的开销。在我的情况下，我不太关心这一点，因为速度似乎没有受到影响，这可能是由于涉及的路径数量相对较少。