CODEWITHSUNDEEP
htmlsvg
Passiday
Passiday

Reputation: 8075

Transform embedded svg file

What is the html5 syntax to apply the power of SVG transform attribute to an external SVG file?

This is the code I have now:

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

The source.svg is a file that is created in Inkscape, A4 format page with some random junk.

I'd like to, say, rotate this image (not the contents of it, but as it is represented in the rendered html document). Initially I'm interested in html-only syntax, however later I plan to manipulate these properties via JavaScript.

Upvotes: 0

Views: 128

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

You can add HTML5 transformations to the DIV. But it's such a glob between browsers..Much more intuitive to work with svg Javascript transforms

Anyway, below is an example of CSS rotation for all browsers 

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

Upvotes: 1

Related Questions