Javascript SVG缩放和坐标

这是我的第一个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>

问题是，我需要将条形图“翻译”回图表的基线，而不是它们最顶端点的原始位置。当前，正确缩放的条形图位于图表顶部：

我尝试了几种修复方法，包括将条形图的“缺失高度”插入translationfactor（条形图从图表的完整高度开始，并动态缩小）。什么都没起作用。我的部分问题是，除了是SVG的新手，我可以整天盯着代码看，而我的大脑仍然无法解析它。负数相乘太抽象了，从根本上说，我就是不懂数学，这当然会使修改代码变得困难

我的问题是:

（1） 上面的代码将条形图重新定位到图表基线上的修复方法是什么

（2） 有没有一种更透明、更平易近人的翻译方法？我的第一个想法是，如果一个条的高度降低到其原始值的40%，那么将原始Y坐标值乘以250%应该会将该条重置为其原始位置（至少是其最高点），但这似乎不起作用

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

---

（4） ActionScript中是否有一种类似于.localToGlobal（）的方法，可以让我完全避免弄乱局部坐标系？

在幕后进行矩阵运算，很难理解数组的前后乘法

目前还不完全清楚您想要实现什么，但从字里行间的阅读来看，您似乎希望以原始（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>

<?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>

接下来，您要在页面上定位图形。让我们把左上角放在（40,40）。 在SVG中，转换是按顺序（后乘）连接的，因此为了使转换符合您指定的顺序，而不是与比例相乘，您应该将其放在第一位

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

---

希望这能有所帮助。

感谢BigBadaboom花时间撰写了如此详尽的答案。如果我不清楚，很抱歉，但这是用于交互式SVG的。我现在上传了一份副本，这是我首先应该做的：除了上面提到的缩放后的条形图放置问题（条形图悬挂在图表顶部）外，条形图大部分都可以工作还有几行我还没有添加的代码，这些代码将在一个州加入欧盟之前的几年中消除障碍。到目前为止，我的假设是，XML格式的SVG代码在SVG加载时只能触发一次，任何由用户启动的代码都必须是JavaScript函数的形式。我错了吗？除了transform命令外，我不确定如何将上面的代码翻译成JavaScript。如果您使用Firefox，您会注意到另一个问题（最初我不打算在本文中询问这个问题），那就是工具栏的位置不稳定。尽管图表在加载时绘制正确，但当您单击状态并使其重新绘制时，条形图会向上漂移并超出图表。据我所知，这个bug在Chrome中没有出现。我还没有在其他浏览器中测试过它。使用SVG动画功能可以做你想做的事情，但是使用JS会容易得多。因为您使用的是JS，所以应该能够将条的位置和大小设置为您想要的大小。身高=（百分之二十）或其他什么。

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

<?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>

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