phantomjs - 文字變換旋轉扭曲文字旋轉

Question

我有一個網頁我想要打印它，我正在使用phantomjs。我的網頁有text元素需要旋轉我使用的是transform和rotate。他們rotate因此在瀏覽器中，但當我打印時旋轉扭曲。
注意：我正在動態創建text。
所以我不能在這種情況下提到class這個answerrotate總是90。

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

這裏是我的代碼

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"); 

我曾嘗試在上面的代碼改變transform到-webkit-transform，但送禮者錯誤

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

Answer 1

你需要使用WebkitTransform而不是-webkit-transform因爲JavaScript款式名稱爲WebkitTransformOrigin和WebkitTransform。

另見How to set the style -webkit-transform dynamically using Javascript?