Question

在下面的d3.js片段中，我希望在使用不同的浏览器时应用适当的旋转样式。然而，第二种风格总是优先于第一种风格。

   var degrees = Math.floor( Math.random() * 360 );
   box_tr.append('td')
    .attr('id', 'image')
    .append('img')
    .attr('id', 'myimage')
    .attr('src', imgurl)
    .attr('style',"-webkit-transform: rotate(" + degrees + "deg);")
    .attr('style',"-moz-transform: rotate(" + degrees + "deg);");

我的期望是否正确？有哪些替代方案？

Answer 1

尝试设置样式，而不是元素上的属性。

var degrees = Math.floor( Math.random() * 360 );
   box_tr.append('td')
    .attr('id', 'image')
    .append('img')
    .attr('id', 'myimage')
    .attr('src', imgurl)
    .style('-webkit-transform',"rotate(" + degrees + "deg);")
    .style('-moz-transform',"rotate(" + degrees + "deg);");

Answer 2

This answer在设置合适的样式时非常有用。在DOM中添加图像时，我在图像元素本身设置了两种样式。

img.style.webkitTransform = "rotate(180deg)";
img.style.MozTransform = "rotate(180deg)";

d3.js为webkit和mozkit旋转变换

2 个答案: