SVG rendering glitch.
phyllisstein opened this issue · comments
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!
Any way to solve that? Repo. deprecated?
@phyllisstein Hi Phyllis, were you able to use the easing feature of this plugin? Thanks.
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>
Having same issue unfortunately.