SVG rendering glitch.

[phyllisstein]

Hey there! I hate to be a bother, but I just tried to implement this component in a project I'm working on and ran into an SVG rendering glitch. I was hoping you might have some insight into what I might have gotten wrong.

The first SVG renders as expected, but after the transition, the second one---which should be an ⨉---looks a little corrupted. I'm not sure how to go about troubleshooting this, but I'm happy to provide any details that'd be useful.

Here's the component I was writing, in case it helps:

import {MorphReplace} from 'react-svg-morph';
import {easeInQuint} from 'react-svg-morph/lib/utils/easing';
import styles from './styles';

class MenuButton extends React.Component {
  static propTypes = {
    menuOpen: React.PropTypes.bool,
    onClick: React.PropTypes.func
  };

  render() {
    const {
      menuOpen,
      onClick
    } = this.props;

    return (
      <div className={styles.button} onClick={onClick}>
        <MorphReplace easing={easeInQuint} height={24} width={24}>
          {menuOpen
            ? <svg height="24" key="close" viewBox="0 0 24 24" width="24">
                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
              </svg>
            : <svg height="24" key="menu" viewBox="0 0 24 24" width="24">
                <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
              </svg>
          }
        </MorphReplace>
      </div>
    );
  }
}

export default MenuButton;

I saw similar results when I refactored the <svg> tags out into separate React components, so I suspect that's not it. Otherwise... any thoughts? Thanks in advance!

[aight8]

Any way to solve that? Repo. deprecated?

[jefflung]

@phyllisstein Hi Phyllis, were you able to use the easing feature of this plugin? Thanks.

[mandriv]

I ran into the same issue.

My SVGs:

Close:

      <svg
        fill={primaryDark}
        preserveAspectRatio="xMidYMid meet"
        height="1em"
        width="1em"
        viewBox="0 0 40 40"
        style={{ verticalAlign: 'middle' }}
      >
        <g>
          <path d="m31.6 10.7l-9.3 9.3 9.3 9.3-2.3 2.3-9.3-9.3-9.3 9.3-2.3-2.3 9.3-9.3-9.3-9.3 2.3-2.3 9.3 9.3 9.3-9.3z" />
        </g>
      </svg>

Menu:

      <svg
        fill={primaryDark}
        preserveAspectRatio="xMidYMid meet"
        height="1em"
        width="1em"
        viewBox="0 0 40 40"
        style={{ verticalAlign: 'middle' }}
      >
        <g>
          <path d="m5 10h30v3.4h-30v-3.4z m0 11.6v-3.2h30v3.2h-30z m0 8.4v-3.4h30v3.4h-30z" />
        </g>
      </svg>

[crypteriumguy]

Having same issue unfortunately.