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

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

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

334閲覧

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

aa316316

総合スコア39

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2019/04/03 02:52

前提・実現したいこと

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

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

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

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

該当コード

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

html

1 <div class='svg__img-wrapper'> 2 <p class='svg__text'>1kg</p> 3 <svg class='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 30'> 4 <defs> 5 <style>.cls-1 {fill: #ffc1cd;}</style> 6 </defs> 7 <rect class='cls-1' width='100%' height='30'/> 8 </svg> 9 <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'> 10 <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'/> 11 </svg> 12 <p class='svg__date'>2月2日</p> 13 </div>
x_x👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問