SVG.ClipPath

by Ulrich Bangert

HTML

<div id="drawing"></div>

JavaScript

var draw = SVG('drawing').size(300, 330)
var rect = draw.rect(300, 300).fill('#00af00')
var text = draw.text('B')
    .font({anchor: 'middle', size: 200})
    .move(150, 50)

var clip = draw.clip().add(draw.path('M0 0 L300 0 L0 300 z'))

rect.clipWith(clip)
text.clipWith(clip)