Resizing SVGs? Path not resizing to parent

1

Hey guys, got an SVG here where the path seems to not resize to the SVG container. What is happening here?

      <animated.svg
        width="100"
        height="100"
        viewBox="0 0 54 54"
        className="lightning-bolt"
        style={svgSpring}
        strokeDashoffset={svgSpring.x}
        preserveAspectRatio="none"
      >
        <path
          fill="none"
          stroke="gold"
          strokeWidth="2"
          strokeDasharray="60"
          height="100%"
          width="100%"
          d="M7 2v11h3v9l7-12h-4l4-8z"
        />
      </animated.svg>

Screen Shot 2020-03-27 at 2.47.45 PM

2

Apparently viewBox property and styling for width and height explicitly in CSS will do the trick:

      <animated.svg
        viewBox="0 0 25 25"
        className="lightning-bolt"
        style={svgSpring}
        strokeDashoffset={svgSpring.x}
        preserveAspectRatio="none"
      >

.lightning-bolt {
  max-width: 300px;
  height: auto;
  position: absolute;
  top: 42%;
  left: 51%;
  transform: rotate(45deg);
}
3

I’m having the same issue. You mind elaborating or looking at what I’m doing wrong? I’m using React.

return (<div>
     <svg className={classes.icon} viewBox="0 0 30 30" preserveAspectRatio="none"><path d={path} /></svg>
    {label}
  </div>)

const useStyles = makeStyles(() => ({
  icon: {
    maxHeight: '25px',
    maxWidth: '25px',
    position: 'relative',
    top: 0,
    left: 0
  }
}));