title: How to rotate shape with transform
body: <p>I have a rectangle which I am rotating it to -45 but on drag the rotation is not applied.</p>
  
  <p>Code:</p>
  
  <pre><code>function createPoly(x, y)
  {
      var width = 41;
      var height = 41;
      var centreX = width / 2;
      var centreY = height / 2;
      var shape = d3.select(this);
      var poly = svg.append("g")
              .classed("bpmnGateway", true)
              .append('svg:rect')
              .attr("type", "poly")
              .attr("x", (x - centreX))
              .attr("y", (y - centreY))
              .attr("width", 41)
              .attr("height", 41)
              .attr("transform", "rotate(-45)")
              .attr("stroke-width", "1.5px")
              .attr("stroke", "#7E7E7E")
              .style('cursor', 'move')
              .style("fill", "#FFED6B")
              .call(drag);
  }
  
  function drag()
  {
      if (shape.attr('type') === 'poly')
      {
          translate = d3.transform(shape.attr("transform")).translate;
          var x = d3.event.dx + translate[0];
          var y = d3.event.dy + translate[1];
          shape.attr("transform", "rotate(-45)")
          shape.attr("transform", "translate(" + x + "," + y + ")");
      }
  }
  </code></pre>
  
  <p>I tried with rotate option inside drag function which didn't work. How do I get it to work?</p>