Best way to fill a SVG shape with other elements without clipping them at boundary?

I need to create several SVG shapes (like circles or polygons) and fill each one of them with some SVG elements.

One way to achieve this is to define the shape and apply a pattern with the fill attribute (cf. snippet below). However, the inner SVG elements are clipped by the outer shape's boundary (the triangles are clipped by the circle).

I would like to find a way to hide all the triangles that do not intersect with the circle, and leave the triangles that overflow at the boundary intact.

Please note that computing whether an element intersects with a circle is quite easy in Javascript but I need to create shapes with complicated boundaries such as polygons.

<!-- Learn about this code on MDN: http://ift.tt/2hEUXaC -->

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://ift.tt/nvqhV5">

  <defs>
    <pattern id="Triangle" width="10" height="10"
        patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10"/>
        </pattern>
  </defs>

  <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
</svg>