• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

9. Clipping and Masking > Clipping to a Path

Clipping to a Path

When you create an SVG document, you establish its viewport by specifying the width and height of the area you’re interested in. This automatically becomes your clipping area; anything drawn outside these limits will not be displayed. You can establish a clipping area of your own with the <clipPath> element. Here’s the simplest case: establishing a rectangular clip path. Inside the <clipPath> element will be the <rect> we wish to clip to. The rectangle itself is not displayed; we only love it for its coordinates. Thus, we are free to add any fill or stroke styles we wish to the elements within the <clipPath>. On the object to be clipped we add a clip-path style property whose value references the


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint