| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> |
| <head> |
| <title>SVG Tests</title> |
| |
| <style type="text/css" media="screen"> |
| p |
| { |
| margin-left: 50px; |
| } |
| </style> |
| </head> |
| <body style="margin: 0px; background-color: #bbb;"> |
| |
| <p>SVG in a "transparent" EMBED tag: <embed src="resources/spinner.svg" type="image/svg+xml" width="40" height="40" wmode="transparent" /></p> |
| |
| <p>SVG in an IMG tag: <img src="resources/spinner.svg" width="30" height="30" /></p> |
| |
| <p style="">SVG in a background-image:</p><div style="position: relative; top: -3em; left: 250px; border: 1px solid #aaa; width: 40px; height: 40px; background-image: url(resources/spinner.svg); background-repeat: no-repeat;"></div> |
| |
| <p>SVG in a "transparent" iframe: <iframe src="resources/spinner.svg" frameborder="0" width="40" height="40" allowtransparency="true"></iframe></p> |
| |
| <p>Inline |
| |
| <svg:svg width="30px" height="30px" viewBox="0 0 50 50"> |
| <svg:g id="spinner" > |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(0,25,25)" fill-opacity="0.04" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(30,25,25)" fill-opacity="0.08" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(60,25,25)" fill-opacity="0.12" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(90,25,25)" fill-opacity="0.16" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(120,25,25)" fill-opacity="0.20" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(150,25,25)" fill-opacity="0.24" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(180,25,25)" fill-opacity="0.29" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(210,25,25)" fill-opacity="0.33" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(240,25,25)" fill-opacity="0.37" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(270,25,25)" fill-opacity="0.41" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(300,25,25)" fill-opacity="0.45" /> |
| <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(330,25,25)" fill-opacity="0.50" /> |
| </svg:g> |
| </svg:svg> |
| |
| </p> |
| |
| </body> |
| </html> |
