svgアイコンの大きさが変わらない。

Question

svgアイコンの大きさを変えたいです。
svgタグにwidth、heightをつけたのですがアイコンの大きさが変わりません。
デベロッパーツールで確認したところsvgの大きさは変わっていたのですが中のpathの大きさが変わっていないことが原因でした。
pathの大きさを変更するには何を使ったらいいのでしょうか？

     <motion.svg
              style={{ position: 'relative', width: '30px', height: '30px' }}
            >
              <motion.path
                d=""// 省略
                fill="transparent"
                strokeWidth="3"
                stroke="#ffffff"
                strokeLinecap="round"
                strokeLinejoin="round"
                style={{　position: 'absolute', top: 0 }}
              />
            </motion.svg>

Comments

[int32_t]

これは React の Framer Motion ですかね。まずは React も Framer Motion も使わない素の SVG でどうすべきか試してみるのはいかがでしょうか。

Answer 1

スタイルではなく属性で指定してはどうでしょうか？
xmlnsの指定も必要な気がします

Comments

[kakedashidesu]

属性の指定とはどういうものなのでしょうか？

[kakedashidesu]

svgにxmlns="http://www.w3.org/2000/svg"を指定しましたが変わりませんでした

[yambejp]

<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
みたいな書き方です

[kakedashidesu]

上記のようにやってみましたがsvgの大きさは変わりますがpathの大きさは変わっていないのでアイコンの大きさも変化しなかったです

[yambejp]

viewBox="0 0 30 30"
も指定してあげてください

https://codepen.io/yambejp/pen/OJWEEJN