1

I have a webpage I want to print it, I am using phantomjs. My web page has text element which need to rotate I am using transform and rotate. They rotate accordingly in browser but When I print there rotation distort.
Note:I am creating text dynamically.
so I can not make a class referring to this answer in this case rotate is always 90. 

.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

Here is my code 

g.append("text")
    .each(function (d) {
    d.angle = (d.startAngle + d.endAngle) / 2;
})
    .attr("dy", ".35em")
    .attr("transform", function (d) {
    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + (innerRadius + 26) + ")" + (d.angle > Math.PI ? "rotate(180)" : "");
})
    .style("text-anchor", function (d) {
    return d.angle > Math.PI ? "end" : null;
})
    .text(function (d) {
    return nameByIndex.get(d.index);
})
    .attr("class", "text");

I have tried changing transform to -webkit-transform in above code, but it giver error

Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '-webkit-transform' is not a valid attribute name.

Community
  • 1
  • 1
ozil
  • 6,930
  • 9
  • 33
  • 56

1 Answers1

0

you need to use WebkitTransform instead of -webkit-transform because The JavaScript style names are WebkitTransformOrigin and WebkitTransform.

Also see How to set the style -webkit-transform dynamically using Javascript?

Community
  • 1
  • 1
ozil
  • 6,930
  • 9
  • 33
  • 56