前提・実現したいこと
現在、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>
あなたの回答
tips
プレビュー