Question

我有一个我要打印的网页，我正在使用phantomjs。我的网页包含text元素需要轮换我正在使用transform和rotate。他们rotate相应地在浏览器中，但当我打印时，旋转扭曲 注意：我正在动态创建text。
因此，在这种情况下，class始终为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更改为query.on('row', function(row) { callBack(null, row); });，但是它提供了错误

Uncaught InvalidCharacterError：无法在'Element'上执行'setAttribute'：' - webkit-transform'不是有效的属性名称。

Answer 1

您需要使用WebkitTransform代替-webkit-transform，因为JavaScript样式名称为WebkitTransformOrigin和WebkitTransform。

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

phantomjs - 文本变换旋转扭曲文本旋转

1 个答案: