test

HTML

<div class="swatch">
<svg version="1.1" width="36" height="31" viewBox="0 0 36 31">
    <defs>
          <path id="swatch-shape" d="M31.431,14.631c1.068-1.623,0.522-3.378-1.006-4.392c-1.684-1.115-3.49-0.815-5.125,0.26
          c1.047-0.688-1.701-3.339-1.725-3.322c1.766-1.256,2.819-2.936,1.541-5.029c-2.525-4.138-7.545,0.398-9.873,2.388
          c-0.909-1.969-3.646-3.224-5.721-1.271c-2.059,1.938-3.606,4.096-5.33,6.309c-1.75,2.248-7.033,9.831-1.172,10.842
          c-1.257,2.27-2.388,4.994,0.423,6.644c3.096,1.816,4.635-1.35,5.911-3.622c-0.277,2.65,2.648,5.02,5.179,3.854
          c1.672-0.77,1.666-3.165,2.438-4.634c-0.538,1.022,0.688,2.708,1.476,3.246c2.081,1.422,3.68-0.103,5.181-1.452
          c1.967,1.478,4.54,1.009,5.616-1.32c0.535-1.158,1.002-2.083,1.855-3.053C32.528,18.454,33.131,16.35,31.431,14.631z"/>
    </defs>
    <use xlink:href="#swatch-shape" x="3" y="3" style="fill: rgba(255,255,255,0.3)"/>
    <use xlink:href="#swatch-shape" x="0" y="0" style="fill: rgba(0,0,0,0.3)"/>
    <use xlink:href="#swatch-shape" x="1" y="1" style="fill: red"/>
</svg>
</div>

CSS

body {
    padding: 20;
    background: #E0D4BC;
}

JavaScript

$(".swatch").on("click", function (e) { alert(e.target); });