我想-webkit-transform: rotate()动态地使用JavaScript 更改属性,但常用的setAttribute不起作用:
img.setAttribute('-webkit-transform', 'rotate(60deg)');
Run Code Online (Sandbox Code Playgroud)
这.style也不起作用......
如何在JavaScript中动态设置它?
我正在研究一种独特的应用程序,它需要根据显示的设备生成特定分辨率的图像.因此,在常规Windows浏览器(96ppi),iPhone(163ppi),Android G1(180ppi)和其他设备上的输出是不同的.我想知道是否有办法自动检测到这一点.
我最初的研究似乎说不.我看到的唯一建议是在CSS中创建一个宽度指定为"1in"的元素,然后检查它的offsetWidth(另请参阅如何通过javascript访问屏幕显示的DPI设置?).有道理,但iPhone用这种技术骗我,说它是96ppi.
另一种方法可能是以英寸为单位获取显示尺寸,然后除以宽度(以像素为单位),但我不知道如何做到这一点.
我想在svg中以cm为单位绘制多边形和路径元素,而不是像素(默认选项).我能够在数字之后添加cm的行和矩形,但是以下的svg代码不起作用:
<svg width="70cm" height="70cm">
<polygon points="1cm,1cm 2.5cm, 1cm 3cm, 13cm 1cm, 13cm"
style="stroke: #000099;
fill: #3333cc;
fill-opacity: 1;
"
/>
</svg>
Run Code Online (Sandbox Code Playgroud)
路径也一样.有谁知道如何解决这个问题?
更新:我尝试使用不同的屏幕,使用inkscape或Chrome浏览svg文件.我在屏幕上测量了cm,因为我想要绘制的形状的真实世界cm.这里有令人费解的结果:
<svg width="20cm" height="20cm" viewBox="0 0 20 20" >
<polygon points='1,1 2.5,1 3,10 1,10'
style="stroke: #000000; fill:none;"/>
</svg>
Run Code Online (Sandbox Code Playgroud)
macbook air screen,每英寸118像素:多边形永远不会在实际测量中,总是更小,在另一个屏幕上的inkscape和Chrome中,每英寸166像素,Chrome中的测量值是可以的,但在Inkscape中没有.如果我尝试导入SVG编辑,则相同.
有人知道Inkscape有什么问题吗?
谢谢