CODEWITHSUNDEEP
javascriptd3.jsrotation
Arihant Parsoya
Arihant Parsoya

Reputation: 117

How to rotate a ForeignObject

I am trying to rotate a foreignobject in D3. Here is my code:

svg
    .append("foreignObject")
    .attr('x', 0)
    .attr("width", 200)
    .attr("height", 50)
    .append("xhtml:body")
    .html("<p>rotate</p>")
    .style('-webkit-transform', 'rotate(90)');

Upvotes: 1

Views: 1099

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

It has to be rotate(90deg):

var svg = d3.select("svg");

svg.append("foreignObject")
  .attr('x', 20)
  .attr('y', 20)
  .attr("width", 50)
  .attr("height", 50)
  .append("xhtml:div")
  .html("<p>rotate</p>")
  .style('-webkit-transform', 'rotate(90deg)');
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Upvotes: 1

Related Questions