Question

将SVG transform attribute的强大功能应用于外部SVG文件的html5语法是什么？

这是我现在的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
  </head>
  <body>
    <div>
      <img src="source.svg" style="border:1px solid black; width:20%; display: block; margin-left: auto; margin-right: auto;" />
    </div> 
  </body>
</html>

source.svg是一个以Inkscape，A4格式页面创建的文件，带有一些随机垃圾。

我想说，旋转这个图像（不是它的内容，但是它在渲染的html文档中表示）。最初我对仅使用HTML的语法感兴趣，但是后来我计划通过JavaScript操作这些属性。

Answer 1

您可以将HTML5转换添加到DIV。但它在浏览器之间是如此的全球化......使用svg Javascript转换更直观

无论如何，下面是所有浏览器的CSS旋转示例

<div  style='-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">...</svg>
</div>

转换嵌入的svg文件

1 个答案: