我有以下代码:
<svg>
<defs>
<rect id = "myRect"
x = "10"
y = "10"
height = "120"
width = "120"
stroke-width = "2px"
stroke = "red"
fill = "blue" />
</defs>
<g transform = "translate(100,30)">
<use xlink:href = "#myRect" />
</g>
<g transform = "translate(100, 100) rotate(45 ? ?)">
<rect id = "myRect"
x = "10"
y = "10"
height = "120"
width = "120"
stroke-width = "2px"
stroke = "green"
fill = "yellow" />
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
当我翻译矩形而不旋转时,它工作正常.但是当我旋转它时,我想围绕它的中心轴点旋转它.我需要传递什么来旋转属性?
使用HTML5时,如果在canvas/中放置一个/ video/ audio/ svg元素div,则4px这些元素下方会有间隙.我在几乎所有支持HTML5的浏览器中测试了下面的代码,不幸的是它们都有同样的问题.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)