質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

anime.jsのsvgアニメーションを用いて動的な棒グラフを実現したい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 208

aa316316

score 33

前提・実現したいこと

現在、jsonから値を取得しanime.jsを用いて縦に伸びる棒グラフを実現しようとしています。

しかし、svgのheightをanime.jsで変更するとviewBoxの範囲をはみ出してしまうため、表示されません。
逆にviewBoxの高さを最初から高くしておくと棒グラフ上部に値を表示しているため、大きな空白ができ不格好になってしまいます。
(あとheightを0→100のように変更すると上から下に伸びてしまいます)

上記など色々触ってみたのですが、viewBoxの高さを可変で変更することが難しそうだと感じたため、anime.js × svgで棒グラフの実現は難しく他の手段を使う必要があるかなと感じています。

知識がなく初級の質問で申し訳ありませんが、
もし上記実現可能であればアドバイス/方法等教えていただけますと幸いです。

該当コード

以下のsvg画像を動的に動かそうと考えています。

      <div class='svg__img-wrapper'>
        <p class='svg__text'>1kg</p>
        <svg class='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 30'>
          <defs>
            <style>.cls-1 {fill: #ffc1cd;}</style>
          </defs>
          <rect class='cls-1' width='100%' height='30'/>
        </svg>
        <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='95' height='32' viewBox='0 0 95 32'>
          <image width='95' height='32' xlink:href='data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAA8CAYAAADYDABOAAACx0lEQVR4nO3diYriQBSF4XLf3//19Bnc9+YU3J4gTJtoKqa8/weF3TBDh5NjmcQU6SyXy3sAnOmyw+ERxYdLFB8uUXy4RPHhEsWHSxQfLlF8uETx4RLFh0sUHy5RfLhE8eESxYdLFB8uUXy4RPHhEsWHS537/R6XHupF43q9htvtFl/P53Mcp9Mpvn6zwWAQhsNhfO33+3F0u93Q6/VCp9OJo+gxr8vlEofHvDSUU055/Rb/Gf2z4/EY9vt9HLnvWBV7Op2G8XgcRqNR3Gl10s5VXofDIex2u7iTc6ZyTyaTmJfGY7HfZXlZv1LnVbr4j/Qu3W63YbPZxI3Ogco9m83CfD6Ps1WTlJeyUmY55aWslFnTeelNoKxS5fVy8Y3+u2a09XodN7aNNKMvFos4w9c9U5FXWsrLJtg683q7+EU6/NEObcOs9snZvaw2fQpYXiq8DmvaSHmpX5o43s2r1uIbe5dq6Bi3STr+1A7U+PRsVRZ5VaO8bMJ49VMgSfGLdBZvJyzaSP1eJ11F0EezTrw09HvOyKuaYl6aNMp+EiQv/iOdrdvlK/2sDbdhl7xsk+yymIZ2kA1dkbHLafr5m5FXNcW8NOzS/GNejRcfaAO+uYVLFB8uUXy4RPHhEsWHS/3VasVlMC4bVpZ7XvGvFTfyf1+Y8EXRP+SVf14vPwpIG2l37nFrwHM530pR9w1iZaTO6+1nYOVwM1gbb55r+81g337zXK0Pf2vTpwC3/1bzydm9rDrzSvLUw08v+MhxgcynFnx4XSCT/HGfOlu3E5YUS/w0U+l4/VuW+BWXRH7DEr/UbEmk9atsXo0/55ZF3dWQVzXFBfB/LYJv/GKz3S4K8kpBb26NZ/jmFi5RfLhE8eESxYdLFB8uUXy4RPHhEsWHSxQfLlF8uETx4RLFh0sUHy5RfLhE8eESxYdLFB8uUXz4E0L4AVElD+dQxgGBAAAAAElFTkSuQmCC'/>
        </svg>
        <p class='svg__date'>2月2日</p>
      </div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる