react svgの画像の多きさを変えたい

Question

reactとアニメーションにframar-motionを使っています。
下記のサイトのsvgのwidth heigthを小さくするとsvg画像(チェック)が見えなくなってしまいます。
どうしたらいいでしょうか？
https://codesandbox.io/s/i3yi9?file=/src/Example.jsx

Answer 1

SVGのviewBoxを使てみてください。

参考

import * as React from "react";
import { motion } from "framer-motion";

export function Example() {
  const [isChecked, setIsChecked] = React.useState(true);

  return (
    <motion.div
      style={{
        width: 150,
        height: 150,
        borderRadius: 30,
        backgroundColor: "#fff",
        cursor: "pointer"
      }}
      whileTap={{ scale: 0.95 }}
      onTap={() => setIsChecked(!isChecked)}
    >
      {isChecked && (
        <motion.div
          style={{
            width: 150,
            height: 150,
            originX: 0,
            originY: 1
          }}
          initial={{ opacity: 0, scale: 0.1 }}
          animate={{
            opacity: 1,
            scale: 1
          }}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="20 -20 100 200" preserveAspectRatio="xMidYMid slice">
            <path
              d="M 38 74.707 L 62.647 99.353 L 108.5 53.4"
              fill="transparent"
              strokeWidth="20"
              stroke="#0AF"
              strokeLinecap="round"
              
            />
          </svg>
        </motion.div>
      )}
    </motion.div>
  );
}

Comments

[kakedashidesu]

どこを変更したのでしょうか？

[FredericChang]

コードの中にviewBox="20 -20 100 200" preserveAspectRatio="xMidYMid slice"を入れます。

[kakedashidesu]

ありがとうございます！