44 lines
1.8 KiB
XML
44 lines
1.8 KiB
XML
<?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>
|