应用自定义转换的RaphaelJS

Question

我在对SVG中的每个路径应用转换时遇到了困难。我知道我需要添加的确切转换，因为我正在使用来自wikimedia的地图，并通过使用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是向后兼容的，所以我找到的所有解决方案(无论如何都没有完全工作)就不会在任何旧的IEs中起作用。

我试着改变的第一件事是：

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

至：

paper.setViewBox(true);

然而，这并不适用于我使用的形状(http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg)

这就是我获得转换金额的地方(如果您查看源代码，就可以看到)。

请告诉我哪里出了问题，以及我该如何增加这个问题。

非常感谢！

---------------------------------EDIT -------------------------------------

在应用下面的修复后，我发现它似乎显示了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.如果原始文件中有转换，您可能需要将相同的转换应用于elements...so --如下所示.

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 (除了匹配原始的)。

原始小提琴

更新的小提琴

Answer 2

我在同样的问题上也取得了成功。你的问题是最清晰的表达。

作为背景，我找到了一张美国及其所有县的SVG地图。我想，“太好了，我就把这些路复制到拉斐尔，鲍勃是你叔叔”。所以，我做了，但是在进口之后，它看起来完全颠倒了。我考虑把一些数学应用到道路上，但决定不这么做。相反，我还研究了transform()选项。

在转换方法中，有几个选项。其中一个选项是使用矩阵("m")。矩阵法有6个选项。-更多细节请参见这里。但是“作为路径”的矩阵设置是这样的：

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

如果你把第四位变成负值，它会颠倒你的形象。

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

HOWEVER...it必须为要翻转的轴选择一个位置。据我所知，这是容器div的顶部边缘。所以你的形象现在就在你的上方。使用viewbox查找它并按您的意愿缩放：

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

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