Question

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

我正在使用普通的SVG（没有Raphael，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

我已经尝试了几个修复，包括将条形码“缺失的高度”插入翻译因子（条形图从图表的整个高度开始并动态缩小）。没有任何效果。我的一部分问题是，除了刚接触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比例为负并翻译图形，以便底部 -left在您想要的位置。

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

希望这有帮助。

SVG缩放和坐标

1 个答案: