<path> element size and position not inside parent <svg>-CodePudding

I have an inline svg element that I am trying to fit inside a black square. the link can be found here: https://codesandbox.io/s/tailwind-css-and-react-forked-ep4tpk?file=/src/App.js:0-1031. As stated in the title the root of the issue is that the path element blows up to full size and is situated completely outside the viewport of its parent svg element.

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

export default function App() {
  return (
    <div className="mr-1 flex h-5 w-5 items-center justify-center rounded-sm bg-black hover:bg-coral">
      <svg
        className="h-3 w-3 fill-current stroke-white"
        fill="fill-current"
        viewBox="0 0 24 24"
      >
        <path
          stroke="#fff"
          strokeWidth="1.5"
          d="m244 84 11.1 12 12-11.98C300.6 51.37 347 36.51 392.6 44.1c68.9 11.48 119.4 71.1 119.4 141v5.8c0 41.5-17.2 81.2-47.6 109.5L283.7 469.1c-7.5 7-17.4 10.9-27.7 10.9s-20.2-3.9-27.7-10.9L47.59 300.4C17.23 272.1 0 232.4 0 190.9v-5.8c0-69.9 50.52-129.52 119.4-141 44.7-7.59 92 7.27 124.6 39.9-.9 0 0 .01 0 0zm11.1 79.9-45-46.8c-21.7-20.82-52.5-30.7-82.8-25.66C81.55 99.07 48 138.7 48 185.1v5.8c0 28.2 11.71 55.2 32.34 74.4L256 429.3l175.7-164c20.6-19.2 32.3-46.2 32.3-74.4v-5.8c0-46.4-33.6-86.03-79.3-93.66-30.3-5.04-61.1 4.84-82.8 25.66l-46.8 46.8z"
        />
      </svg>
    </div>
  );
}

CodePudding user response：

Use this path instead,

<path
  stroke="#fff"
  strokeWidth="1.5"
  d="M11.5,4.4L12,4.9l0.5-0.5c1.4-1.4,3.4-2,5.4-1.7c3,0.5,5.1,3.1,5.1,6.1V9c0,1.8-0.7,3.5-2,4.7l-7.8,7.2 c-0.3,0.3-0.7,0.5-1.2,0.5s-0.9-0.2-1.2-0.5L3,13.7C1.7,12.5,1,10.8,1,9V8.7c0-3,2.2-5.6,5.1-6.1C8.1,2.4,10.1,3,11.5,4.4 C11.4,4.4,11.5,4.4,11.5,4.4z M12,7.8l-1.9-2C9.1,4.9,7.8,4.5,6.5,4.7c-2,0.3-3.4,2-3.4,4V9c0,1.2,0.5,2.4,1.4,3.2l7.5,7l7.5-7 c0.9-0.8,1.4-2,1.4-3.2V8.7c0-2-1.4-3.7-3.4-4c-1.3-0.2-2.6,0.2-3.6,1.1L12,7.8L12,7.8z"
/>

CodePudding user response：

Please send the raw svg to be fully reviewed. Apparently there is a problem with the SVG path.