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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

参考

jsx
1import * as React from "react";
2import { motion } from "framer-motion";
3
4export function Example() {
5  const [isChecked, setIsChecked] = React.useState(true);
6
7  return (
8    <motion.div
9      style={{
10        width: 150,
11        height: 150,
12        borderRadius: 30,
13        backgroundColor: "#fff",
14        cursor: "pointer"
15      }}
16      whileTap={{ scale: 0.95 }}
17      onTap={() => setIsChecked(!isChecked)}
18    >
19      {isChecked && (
20        <motion.div
21          style={{
22            width: 150,
23            height: 150,
24            originX: 0,
25            originY: 1
26          }}
27          initial={{ opacity: 0, scale: 0.1 }}
28          animate={{
29            opacity: 1,
30            scale: 1
31          }}
32        >
33          <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="20 -20 100 200" preserveAspectRatio="xMidYMid slice">
34            <path
35              d="M 38 74.707 L 62.647 99.353 L 108.5 53.4"
36              fill="transparent"
37              strokeWidth="20"
38              stroke="#0AF"
39              strokeLinecap="round"
40              
41            />
42          </svg>
43        </motion.div>
44      )}
45    </motion.div>
46  );
47}