1

我正在将条形图制作为 SVG，并且非常希望我的条形图具有动画效果并从 y 轴上的“0”向上增长到相应的值。

让我挣扎的是坐标（0,0）在左上角而不是左下角。在我的“非动画”解决方案中，我根据它们应该有多高给条形图赋予不同的“y”值，如下所示：

<svg id="graph" 
        xmlns="http://www.w3.org/2000/svg" 
        xlink="http://www.w3.org/1999/xlink">
    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>
    <rect width="50" height="14" x="0" y="8" fill="url(#gradient)"></rect>
    <rect width="50" height="22" x="55" y="0" fill="url(#gradient)"></rect>
    <rect width="50" height="15" x="110" y="7" fill="url(#gradient)"></rect>
    <rect width="50" height="9" x="165" y="13" fill="url(#gradient)"></rect>
</svg>

这看起来像一个条形图，因为 (y + height) 对于所有矩形都是相同的，但它在概念上是“从上到下”绘制的，从 y 轴的不同点开始并向下增长到相同的 y 值。

现在，当我想为它制作动画时，我显然希望它们“向上”生长，这就是我卡住的地方。

<rect width="50" height="14" x="0" y="8" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="14" dur="2s" id="animation"></animate>    
</rect>

这将使矩形从 y=8“向下”增长到 y=22，并且在左上角 (0,0) 的网格中，这是非常有意义的。但是，我真的想做相反的事情，因为似乎“高度”属性的负值被视为 0（或者我可以将高度从 -14 设置为 0）我不确定我会如何做到这一点。

我试过用谷歌搜索，但运气不好。我也很想在不使用图表库的情况下做到这一点。

4

3 回答 3

6

如果您使用 scale(1, -1) 变换包装所有内容，则所有 y 值都乘以 -1，这具有翻转 y 轴的效果。然后，您需要将所有内容翻译下来，以便它们具有正值并且您可以看到它们：

<g transform="translate(0, 40) scale(1, -1)">    
  <rect width="50" height="14" x="0" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="14" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="55" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="22" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="110" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="15" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="165" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="9" dur="2s" fill="freeze"></animate>
  </rect>
</g>

请注意，您需要将所有 y 值设置为相等，并且您可能想要翻转渐变。

于 2012-08-06T11:17:37.787 回答
0

替代解决方案，无需翻转任何轴：

<svg id="graph" 
        xmlns="http://www.w3.org/2000/svg" 
        xlink="http://www.w3.org/1999/xlink"> 
    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>
    <rect width="50" height="9" x="0" y="9" fill="url(#gradient)"></rect>
    <rect fill="white" opacity="1" x="-1" y="8" width="52">
        <animate attributeName="height" to="0" from="10" dur="2s" id="curtain"></animate>
    </rect>

    ...

</svg>

通过绘制一个实心条，然后在其顶部添加一个白色不透明矩形并让该矩形获得动画，它看起来好像条向上生长。

我最终得到了这个解决方案，因为我还需要添加各种标签和文本覆盖（但我没有考虑这部分，因为我认为它不相关）。使用 scale(1 -1) 翻转 svg 会使文本上下颠倒，并且仅翻转 svg 中包含条形的部分意味着必须使用两组不同的坐标，这就是我的代码（这是生成的图表而不是静态 XML）有点乱。

于 2012-08-06T23:24:50.610 回答
-1

我玩弄了你的代码并改变了一些东西。您如何看待以下问题？

<svg id="graph" 
    xmlns="http://www.w3.org/2000/svg" 
    xlink="http://www.w3.org/1999/xlink">

    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>

    <rect width="50" height="14" x="0" y="8" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation1"></animate>    
    </rect>

    <rect width="50" height="22" x="55" y="0" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation2"></animate>    
    </rect>

    <rect width="50" height="15" x="110" y="7" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation3"></animate>    
    </rect>

    <rect width="50" height="9" x="165" y="13" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation"></animate>    
    </rect>

    <rect width="50" height="14" x="0" y="8" fill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation4"></animate>    
    </rect>
</svg>

祝一切顺利

于 2012-08-05T09:15:34.497 回答