| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>SVG inside transformed div</title> |
| <style> |
| body { |
| background-color: white; |
| } |
| .box { |
| height: 400px; |
| width: 400px; |
| margin: 50px; |
| border: 1px solid black; |
| -o-transform: translate(30px, 30px) rotate(20deg); |
| -webkit-transform: translate(30px, 30px) rotate(20deg); |
| } |
| </style> |
| </head> |
| <body> |
| <p>CSS Transformed HTML div with SVG inside it. objectBoundingBox patterns on text.</p> |
| <div class="box"> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 480 360"> |
| <pattern id="pat1" width=".04" height=".4" viewBox="5 5 20 20"> |
| <rect x="5" y="5" width="10" height="10" fill="red" /> |
| <rect x="10" y="10" width="10" height="10" fill="green" /> |
| </pattern> |
| <rect x="25" y="10" width="430" height="60" stroke="black" fill="url(#pat1)" /> |
| <text font-family="Arial" font-size="12" x="25" y="85">Pattern created using red and green rectangles applied to fill of rectangle</text> |
| <pattern id="pat2" width=".04" height=".4" viewBox="0 0 20 20"> |
| <rect x="0" y="0" width="10" height="10" fill="red" /> |
| <rect x="10" y="0" width="10" height="10" fill="green" /> |
| <rect x="0" y="10" width="10" height="10" fill="blue" /> |
| <rect x="10" y="10" width="10" height="10" fill="yellow" /> |
| </pattern> |
| <rect x="35" y="110" width="410" height="40" fill="none" stroke="url(#pat2)" stroke-width="20" /> |
| <text font-family="Arial" font-size="12" x="25" y="175">Pattern of 4 rectangles applied to a stroke of a rectangle.</text> |
| <pattern id="pat3" width=".03" height=".3" viewBox="0 0 10 20"> |
| <rect x="0" y="0" width="10" height="10" fill="red" /> |
| <rect x="0" y="10" width="10" height="10" fill="green" /> |
| </pattern> |
| <text font-family="Arial" font-size="50" fill="url(#pat3)" x="25" y="220">Pattern on fill</text> |
| <text font-family="Arial" font-size="12" x="25" y="235">Pattern consists of red and green rows</text> |
| <pattern id="pat4" width=".06" height=".2" viewBox="0 0 20 10"> |
| <rect x="0" y="0" width="10" height="10" fill="red" /> |
| <rect x="10" y="0" width="10" height="10" fill="blue" /> |
| </pattern> |
| <text font-family="Arial" font-size="40" fill="none" stroke="url(#pat4)" stroke-width="2" x="25" y="275">Pattern on stroke</text> |
| <text font-family="Arial" font-size="12" x="25" y="290">Pattern consists of red and blue columns</text> |
| <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text> |
| <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> |
| </svg> |
| </div> |
| </body> |
| </html> |
