相关疑难解决方法(0)

在SVG中围绕其自身中心旋转矩形

我有以下代码:

<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)

当我翻译矩形而不旋转时,它工作正常.但是当我旋转它时,我想围绕它的中心轴点旋转它.我需要传递什么来旋转属性?

svg

42
推荐指数
4
解决办法
7万
查看次数

HTML5中的canvas/video/audio元素下方有4px的差距

使用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)

html css html5 canvas

27
推荐指数
2
解决办法
6050
查看次数

标签 统计

canvas ×1

css ×1

html ×1

html5 ×1

svg ×1