SVG.ClipPath

by Ulrich Bangert

HTML

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

CSS

body {
  margin: 0;
}
div {
  width: 100%;
  height: 100%;
}
div svg {
  width: 100%;
}

JavaScript

var draw = SVG('drawing')
    .viewbox(0, 0, 300, 300)
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)