我有一个要打印的网页,我正在使用phantomjs。我的网页上有text元素需要旋转,我正在使用transformrotate。它们在浏览器中相应地rotate,但是当我在那打印时,旋转变形。
注意:我正在动态创建text
因此,在这种情况下,我不能使class引用此answer,而rotate始终为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,但是它给出了错误


  未捕获的InvalidCharacterError:无法在'Element'上执行'setAttribute':'-webkit-transform'不是有效的属性名称。

最佳答案

您需要使用WebkitTransform而不是-webkit-transform,因为JavaScript样式名称是WebkitTransformOriginWebkitTransform

另请参见How to set the style -webkit-transform dynamically using Javascript?

09-11 08:12
查看更多