RaphaelJS 应用自定义变换答案

【问题标题】：RaphaelJS applying a custom transformRaphaelJS 应用自定义变换
【发布时间】：2014-07-10 10:07:04
【问题描述】：

我无法对 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 是向后兼容的，所以我发现的所有解决方案（无论如何都没有完全起作用）例如在任何旧的 IE 中都不起作用。

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

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

到：

paper.setViewBox(true);

但这不适用于我正在使用的形状 (http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg)

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

请告知我哪里出错了，以及如何添加这个。

非常感谢！

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

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

这就是它的外观：

结果是这样的：

（还注意到我错过了南美洲，尽管它被引用了）

这是它当前外观的新小提琴：

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

再次感谢

【问题讨论】：

这是一个巨大的视图框

标签： svg raphael transform scale

【解决方案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

【讨论】：

唉，我错过了它显示的颠倒和翻转！请参阅我的最新编辑。谢谢
那是因为它在原版中是倒置的，并且每个组都有一个应用了负 Y 比例的变换。
啊，我明白了。我在指定描边和填充后尝试添加'transform="translate(100, 0) scale(-1, 1)'，但它似乎没有做任何事情。检查时，它只是通过：transform="矩阵（1,0,0,1,0,0）”。我希望我能更多地理解这一点。任何帮助以正确的方式表达将不胜感激
我已经编辑了答案，其中包括一个比例尺，如果您担心精度（变换中的最后一对参数），您需要确定地图的中心以进行缩放。
太好了，再次感谢您。最受赞赏

【解决方案2】：

我已经成功解决了完全相同的问题。你的问题是最清楚的表达。

作为背景知识，我找到了一张美国及其所有县的 SVG 地图。我想，“太好了，我只需将这些路径复制到 Raphael 中，Bob 就是你的叔叔”。所以，我做到了，但在导入后它看起来完全颠倒了。我考虑对路径应用一些数学，但决定反对。相反，我也研究了 transform() 选项。

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

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

如果你把第四名设为负数，它会反转你的形象。

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

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

【讨论】：