45 lines
2.8 KiB
HTML
45 lines
2.8 KiB
HTML
<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>
|