third_party/WebKit/LayoutTests/svg/custom/embedding-external-svgs.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
   2     <head>
   3         <title>SVG Tests</title>
   4
   5         <style type="text/css" media="screen">
   6             p
   7             {
   8                 margin-left: 50px;
   9             }
  10         </style>
  11     </head>
  12     <body style="margin: 0px; background-color: #bbb;">
  13
  14         <p>SVG in a "transparent" EMBED tag: <embed src="resources/spinner.svg" type="image/svg+xml" width="40" height="40" wmode="transparent" /></p>
  15
  16         <p>SVG in an IMG tag: <img src="resources/spinner.svg" width="30" height="30" /></p>
  17
  18         <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>
  19
  20         <p>SVG in a "transparent" iframe: <iframe src="resources/spinner.svg" frameborder="0" width="40" height="40" allowtransparency="true"></iframe></p>
  21
  22         <p>Inline
  23
  24             <svg:svg width="30px" height="30px" viewBox="0 0 50 50">
  25                 <svg:g id="spinner" >
  26                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(0,25,25)"   fill-opacity="0.04" />
  27                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(30,25,25)"  fill-opacity="0.08" />
  28                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(60,25,25)"  fill-opacity="0.12" />
  29                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(90,25,25)"  fill-opacity="0.16" />
  30                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(120,25,25)" fill-opacity="0.20" />
  31                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(150,25,25)" fill-opacity="0.24" />
  32                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(180,25,25)" fill-opacity="0.29" />
  33                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(210,25,25)" fill-opacity="0.33" />
  34                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(240,25,25)" fill-opacity="0.37" />
  35                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(270,25,25)" fill-opacity="0.41" />
  36                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(300,25,25)" fill-opacity="0.45" />
  37                     <svg:polygon points="22,0 28,0 27,12 23,12" fill="#000" x="22" transform="rotate(330,25,25)" fill-opacity="0.50" />
  38                 </svg:g>
  39             </svg:svg>
  40
  41         </p>
  42
  43     </body>
  44 </html>