.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
SVG Gotchas!
Hey all,
It should be no secret that GSAP does a ton of work to get around SVG-related browser bugs and some serious heavy lifting to make working with SVG as similar to DOM/CSS as possible. We did our best to outline these strengths here: http://greensock.com/svg-tips
However, the workflow of designing an SVG in Illustrator (or other programs) and getting it to play nice can be a little challenging. Why is illustrator renaming my layers? Why did it put a transform on that thing? Why is
A little tip about masking a stroke like PointC is doing. If you notice your masks are being clipped or aren't showing up, try specifying the units like this.
<mask id="mask" maskUnits="userSpaceOnUse">
<path class="mask-path" d="M100,250 500,250" />
</mask>
In this demo you can't see the vertical and horizontal lines. And in some browsers like Firefox and IE/Edge, the curved path is being clipped 20px on the top and bottom.
See the Pen 394dfe1ade2c3a5
