| <?xml version="1.0"?> |
| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> |
| |
| <defs> |
| <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1"> |
| <stop offset="0" stop-color="rgb(255, 114, 180)" stop-opacity="0.5" /> |
| <stop offset="1" stop-color="rgb(255, 0, 123)" /> |
| </linearGradient> |
| <linearGradient id="h_stroke_gradient"> |
| <stop offset="0" stop-color="black" /> |
| <stop offset="1" stop-color="black" stop-opacity="0" /> |
| </linearGradient> |
| <linearGradient id="v_stroke_gradient" x1="0" y1="0" x2="0" y2="1"> |
| <stop offset="0" stop-color="black" /> |
| <stop offset="1" stop-color="black" stop-opacity="0" /> |
| </linearGradient> |
| </defs> |
| |
| <rect width="400" height="400" fill="url(#gradient)" /> |
| |
| <g transform="translate(10,10)"> |
| <rect width="380" height="25" fill="white" opacity="0.5" /> |
| <g stroke-width="1" transform="translate(-0.5, -0.5)"> |
| <line x1="0" y1="0" x2="380" y2="0" stroke="url(#h_stroke_gradient)" /> |
| <line x1="0" y1="-0.5" x2="0" y2="25" stroke="url(#v_stroke_gradient)" /> |
| </g> |
| <text x="2" font-size="20" dominant-baseline="hanging">This is hanging from the top-left corner</text> |
| </g> |
| |
| <foreignObject x="10" y="45" width="380" height="150"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <body> |
| <p> |
| The piece of text above should be aligned with the top-left corner of the rectangle below it. Both the <code><text></code> and the <code><rect></code> are located at the same coordinates and the <code><text></code> element uses the <code>hanging</code> value for its <code>dominant-baseline</code> attribute. |
| </p> |
| <p> |
| <a href="mailto:aq@fuchsia-design.com" style="color: maroon">Antoine Quint</a>, January 27th |
| </p> |
| </body> |
| </html> |
| </foreignObject> |
| |
| </svg> |
