<svg:g x="0"
       y="0"
       attr.transform="translate({{position.x}},{{position.y}}) scale({{scale}})"
       (mousedown)="this.onMousedown($event)">
  <rect vector-effect="non-scaling-stroke"
        fill="#fff"
        stroke="#000"
        x="0"
        y="0"
        attr.rx="{{cornerRadius}}"
        attr.ry="{{cornerRadius}}"
        attr.width="{{size.width}}"
        attr.height="{{size.height}}">
  </rect>
  <text text-anchor="middle"
        alignment-baseline="middle"
        attr.x="{{size.width/2}}"
        attr.y="{{size.height/2}}">
    {{card.text}}
  </text>
</svg:g>

<svg:g x="0"
       y="0"
       attr.transform="translate({{position.x}},{{position.y}}) scale({{scale}})"
       (mousedown)="this.onMousedown($event)">
  <defs>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1.2" />
      <feOffset dx="1" dy="1" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.4"/>
      </feComponentTransfer>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect vector-effect="non-scaling-stroke"
        fill="#fff"
        stroke="#ccc"
        x="0"
        y="0"
        style="filter:url(#drop-shadow)"
        attr.rx="{{cornerRadius}}"
        attr.ry="{{cornerRadius}}"
        attr.width="{{size.width}}"
        attr.height="{{size.height}}">
  </rect>
  <text text-anchor="middle"
        alignment-baseline="middle"
        attr.x="{{size.width/2}}"
        attr.y="{{size.height/2}}">
    {{card.text}}
  </text>
</svg:g>

Add drop shadow to card
Add drop shadow to card
