SVG缩放和坐标

Question

这是我的第一个SVG项目，我不是程序员，但我涉足交互式信息图表。我以前在这方面的经验来自于使用ActionScript。

我正在使用普通的SVG（不拉斐尔，D3等），并试图创建一个交互式条形图。经过与SVG一些最初的困难坐标系和缩放，我发现了一些代码网上，处理后缩放翻译：

<text x="x_coord0" y="y_coord0" transform="scale(x_scale, y_scale) translate(-x_coord0*(x_scale-1)/x_scale, -y_coord0*(y_scale-1)/y_scale)" …>text</text> 

我将它改成这个JavaScript：

var translationfactor = ((0 - y_position)*(y_scalefactor - 1)/y_scalefactor); 
var matrix = "scale(1," + y_scalefactor + ") translate(0," + Number(translationfactor) + ")"; 
targetbar.setAttribute("transform", matrix); 

的问题是，我需要将“翻译”的小节转回到图表的基线，而不是其最高点的原始位置。目前，正确缩放条拥抱图表的顶部：

http://billgregg.net/miscellany/upsidedown-barchart.png

我已经试过了一些修复，包括堵漏棒‘失踪高度’到translationfactor（酒吧开出的全高度图表并动态缩小）。没有任何工作。我的部分问题是，除了SVG新手之外，我可以整天盯着代码，而我的大脑仍然无法解析它。将负数相乘太抽象了，在基本层面上，我不会“弄”数学，这当然会使修改代码变得困难。

我的问题：

（1）什么是上面的代码到酒吧后面放置在图表的基线的修正？

（2）是否有更透明，更行人的方式来完成翻译？我首先想到的是，如果条的高度降低到其原始值的40％，那么将原始Y坐标值乘以250％应该将条重新设置到其原始位置（至少是其最高点），但是似乎没有工作。

（3）有没有办法将酒吧的原点设置在底部？在Flash中这是可能的，但据我所知，这是一个手册，而不是一个程序化的任务。

（4）在ActionScript中是否有类似于.localToGlobal（）的方法可以让我避免混淆局部坐标系？

Answer 1

在幕后，矩阵运算正在进行，数组的前置和后置乘法难以让你头脑发热。

这是不完全清楚你想要实现什么，但读取行之间，这听起来像你想要提供在他们的原始（ish）形式的图形坐标，并有SVG的规模和位置为你（？ ）

如果是这样的话，那么我认为解决方案比您想象的更简单。

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <g transform=""> 

    <rect x="0" width="1" height="5" fill="red"/> 
    <rect x="1" width="1" height="11" fill="green"/> 
    <rect x="2" width="1" height="12" fill="orange"/> 
    <rect x="3" width="1" height="8" fill="blue"/> 

    </g> 

</svg> 

哪里x是显而易见的，酒吧长度为height：

假设我是对的，我们会用一些看起来像这样的开始。 y默认为0，所以我们在这里不需要它。

您基本上想知道在transform中如何缩放和定位页面上的条。你的图形是“颠倒”的事实有点帮助。因为SVG的原点位于左上角。

首先应用一个比例。让我们把杆20个像素宽，并通过10

<g transform="scale(20,10)"> 

下一页缩放长度可达要在页面上的图形定位。让我们把（40,40）的左上角。 在SVG中，变换按顺序连接（后乘），所以为了使翻译成为您指定的内容，而不是乘以比例，您应该先将其放在第一位。

<g transform="translate(40,40) scale(20,10)"> 

所以最终的SVG看起来是这样的：

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <g transform="translate(40,40) scale(20,10)"> 

    <rect x="0" width="1" height="5" fill="red"/> 
    <rect x="1" width="1" height="11" fill="green"/> 
    <rect x="2" width="1" height="12" fill="orange"/> 
    <rect x="3" width="1" height="8" fill="blue"/> 

    </g> 

</svg> 

上面已经假定你已经从你的基地，20％减去值简化。如果你想保持纯粹的原始值，这是可能的，但事情会变得有点棘手。您需要修改每个小节的值y和height，或使用剪切将小节的部分隐藏在20％以上。

对于“正确向上”/正常图。所有你需要做的就是让y缩放，并翻译图表，这样就可以将你想要的东西留在左边。

<g transform="translate(40,140) scale(20,-10)"> 

希望这会有所帮助。