SVG动画高度

问题描述 投票：0回答：1

我尝试制作高度动画，以便图表中的条形从 100% 高度变为 30%，然后回到 100%。我以为我可以用属性“height”来做到这一点，但显然不行。它根本不起作用，也没有做任何事情，所以显然我确实做错了什么。我不知道该用什么来代替。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1276.9 806.1">
  <defs>
    <style>
      .cls-1 {
        fill: #bcbcbc;
      }
    </style>
  </defs>
  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
  <g>
    <g id="Ebene_1">
      <g id="diagramm_balken">
        <path id="achsen" class="cls-1" d="M944.6,722H313.4c-10.3,0-18.9-8.6-18.9-18.9V71.9c0-10.3,8.6-18.9,18.9-18.9s18.9,8.6,18.9,18.9v612.3h612.3c10.3,0,18.9,8.6,18.9,18.9s-8.6,18.9-18.9,18.9Z"/>
        <path class="cls-1" d="M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z">
          <animate
      attributeName="height"
      attributeType="XML"
      dur="4s"
      values="30;100;30"
      repeatCount="indefinite"/>
        </path>
        <path class="cls-1" d="M531.7,305.1h52.4c12.8,0,23.2,10.4,23.2,23.3v351.1c0,12.9-10.4,23.3-23.2,23.3h-52.4c-12.8,0-23.2-10.4-23.2-23.3v-351.1c0-12.9,10.4-23.3,23.2-23.3Z">
           <animate
      attributeName="height"
      attributeType="XML"
      dur="4s"
      values="30;100;30"
      repeatCount="indefinite"/>
    </path>
        <path class="cls-1" d="M674.4,226h52.4c12.8,0,23.2,10.2,23.2,22.9v432.7c0,12.6-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.2-23.2-22.9V248.9c0-12.6,10.4-22.9,23.2-22.9Z">
           <animate
      attributeName="height"
      attributeType="XML"
      dur="4s"
      values="30;100;30"
      repeatCount="indefinite"/>
    </path>
        <path class="cls-1" d="M816.5,127.9h52.4c12.8,0,23.2,10.3,23.2,23v529.9c0,12.7-10.4,23-23.2,23h-52.4c-12.8,0-23.2-10.3-23.2-23V150.9c0-12.7,10.4-23,23.2-23Z">
           <animate
      attributeName="height"
      attributeType="XML"
      dur="4s"
      values="30;100;30"
      repeatCount="indefinite"/>
    </path>
      </g>
    </g>
  </g>
</svg>

然后我尝试了缩放，但矩形向下移动并且看起来不对。我的意思是，它有点工作，但当它比图表结束的位置进一步向下时，它就不会被使用。

我感谢任何帮助:)）

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1276.9 806.1">
  <defs>
    <style>
      .cls-1 {
        fill: #bcbcbc;
      }
    </style>
  </defs>
  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
  <g>
    <g id="Ebene_1">
      <g id="diagramm_balken">
        <path id="achsen" class="cls-1" d="M944.6,722H313.4c-10.3,0-18.9-8.6-18.9-18.9V71.9c0-10.3,8.6-18.9,18.9-18.9s18.9,8.6,18.9,18.9v612.3h612.3c10.3,0,18.9,8.6,18.9,18.9s-8.6,18.9-18.9,18.9Z"/>
        <path class="cls-1" d="M389.1,422.6h52.4c12.8,0,23.2,10.3,23.2,22.9v233.5c0,12.7-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.3-23.2-22.9v-233.5c0-12.7,10.4-22.9,23.2-22.9Z">
          <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" 
        dur="4s" 
        repeatCount="indefinite" />
        </path>
        <path class="cls-1" d="M531.7,305.1h52.4c12.8,0,23.2,10.4,23.2,23.3v351.1c0,12.9-10.4,23.3-23.2,23.3h-52.4c-12.8,0-23.2-10.4-23.2-23.3v-351.1c0-12.9,10.4-23.3,23.2-23.3Z">
           <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" 
        dur="4s" 
        repeatCount="indefinite" />
    </path>
        <path class="cls-1" d="M674.4,226h52.4c12.8,0,23.2,10.2,23.2,22.9v432.7c0,12.6-10.4,22.9-23.2,22.9h-52.4c-12.8,0-23.2-10.2-23.2-22.9V248.9c0-12.6,10.4-22.9,23.2-22.9Z">
           <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" 
        dur="4s" 
        repeatCount="indefinite" />
    </path>
        <path class="cls-1" d="M816.5,127.9h52.4c12.8,0,23.2,10.3,23.2,23v529.9c0,12.7-10.4,23-23.2,23h-52.4c-12.8,0-23.2-10.3-23.2-23V150.9c0-12.7,10.4-23,23.2-23Z">
           <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="1,1; 1,3; 1,1"
        begin="4s" 
        dur="4s" 
        repeatCount="indefinite" />
      </path>
      </g>
    </g>
  </g>
</svg>

html svg svg-animate
1个回答
0
投票

<path>
元素没有 
height
属性/属性。

正如 Michael Mullany 所评论的，您最好在 SVG 代码中手动重建图表。仅仅因为图形应用程序倾向于导出相当复杂的 SVG 标记，在编码动画等内容时很难操作。

找到适合动画的 SVG 元素

一如既往，这取决于您的要求 - 查看候选人：

  • <path>
    ：没有高度属性。您可以在 SMIL 中（通过 SVG d 属性）或通过 CSS 
    animate
    属性对其几何或路径数据（由 
    d
    属性表示）进行动画处理。对于后者 - 不幸的是，到目前为止，webkit
     浏览器（尤其是 Apple 的 Safari）不支持
    d
     属性。虽然，通过 SMIL 对路径数据进行动画处理可以在所有浏览器中工作，但它也不是很方便，因为它需要对路径数据命令有相当深刻的理解（例如，所有“变形”命令都需要兼容）
    • <line>
  • 允许您对线条的起始或结束坐标进行动画处理 - 由 
    y1
    和     y2
     属性表示。缺点： 1. 无法通过 CSS 访问 2. 您只能通过
    stroke-line-cap
     应用统一的圆角半径。非圆角元素的有效候选者，但不适合您的情况。
    • <rect>
  • ：通过 
    height
     和     rx
     属性提供 
    ry
     属性以及 border-radius 属性（甚至可以通过 CSS 设置样式......除了在 webkit/Safari 中）。 
    宾果游戏？？？
     还有一点问题。虽然我们可以可靠地对 
    height 属性/属性进行动画处理，但我们无法直接定义“高度变化原点”。但是我们可以通过变换来解决这个问题：





<svg viewBox="0 0 100 100">

  <style>
    .rect {
      fill: #ccc;
      /* flip graphs */
      transform: scale(1, -1);
      /* define axis origin as transforms-origin referance point */
      transform-origin: 0 80px;
      width: 10px;
      animation: 1s graphAni forwards alternate infinite ease-in-out;
    }

    .delay0 {
      animation-delay: 0.25s;
    }

    .delay1 {
      animation-delay: 0.5s;
    }

    .delay2 {
      animation-delay: 0.75s;
    }

    .delay3 {
      animation-delay: 1s;
    }

    @keyframes graphAni {
      to {
        height: 0px;
      }
    }
  </style>
  <!-- x/y axis -->
  <path d="M 17.5 20 v60 h65" stroke="#ccc" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
  <!-- graphs -->
  <rect class="rect delay0" x="25" y="80" rx="2.5" height="20" />
  <rect class="rect delay1" x="40" y="80" rx="2.5" height="30" />
  <rect class="rect delay2" x="55" y="80" rx="2.5" height="40" />
  <rect class="rect delay3" x="70" y="80" rx="2.5" height="50" />
</svg>






基本上，我们只需通过 
transform: scale(1, -1)
 翻转图形渲染，这样我们就可以在动画期间增加/减少高度值。我们还需要设置一个变换原点作为参考点——这将是图形轴原点。
这是一个没有转换的例子：






svg {
  width: 50vmin;
  display: block;
  outline: 1px solid #ccc;
  overflow: visible;
}


<svg viewBox="0 0 100 100">

  <style>
    .rect {
      fill: red;
      /* define axis origin as transforms-origin referance point */
      transform-origin: 0 80px;
      width: 10px;
      animation: 1s graphAni forwards alternate infinite ease-in-out;
    }

    .delay0 {
      animation-delay: 0.25s;
    }

    .delay1 {
      animation-delay: 0.5s;
    }

    .delay2 {
      animation-delay: 0.75s;
    }

    .delay3 {
      animation-delay: 1s;
    }

    @keyframes graphAni {
      to {
        height: 0px;
      }
    }
  </style>
  <!-- x/y axis -->
  <path d="M 17.5 20 v60 h65" stroke="#ccc" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
  <!-- graphs -->
  <rect class="rect delay0" x="25" y="80" rx="2.5" height="20" />
  <rect class="rect delay1" x="40" y="80" rx="2.5" height="30" />
  <rect class="rect delay2" x="55" y="80" rx="2.5" height="40" />
  <rect class="rect delay3" x="70" y="80" rx="2.5" height="50" />
</svg>




此外，我们可能不需要不同的初始高度值，而是依靠动画延迟来获得“阶梯式”图形渲染。

    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.