Question

我正在制作一个条形图作为SVG，非常希望我的条形图能够动画并从y轴上的“0”向上增长到相应的值。

让我奋斗的是coord（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）位于左上方，这是完全有意义的。但是，我真的想做相反的事情，因为看起来“height”属性的负值被视为0（或者我可以将高度从-14设置为0）我不确定我将如何做到这一点。 / p>

我试过谷歌搜索但没有太多运气。我也非常喜欢这样做而不使用图表库。

Answer 1

如果用缩放（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值设置为相等，并且可能需要翻转渐变。

Answer 2

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

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

通过绘制一个实心条，然后在其上方添加一个白色非透明矩形，并使那个矩形获得一个动画，就好像条形图正在向上增长。

我最终得到了这个解决方案，因为我还需要添加各种标签和文本叠加层（但由于我不认为它是相关的，所以我离开了那个部分）。用刻度（1 -1）翻转svg会使文本显示为倒置，并且只翻转svg中包含条形的部分意味着必须使用两组不同的坐标来制作我的代码（这是生成的图表而不是静态XML）有点乱。

Answer 3

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

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

一切顺利

如何在SVG中制作条形图，动画条形图向上增长？

3 个答案: