<!
doctype html >
<
style >
svg {
width:
800 px;
height:
600 px;
font-size:
10 px;
}
svg svg {
width:
80 px;
height:
80 px;
}
rect:first-child {
x:
40 px;
y: calc(
5 % +
10 px);
width: calc(
80 px +
2 em );
height:
10 em ;
rx: auto;
ry:
5 %;
cx:
100 px;
cy:
200 px;
}
circle {
r: calc(
70 px);
}
g > #c2 {
cx:
80 px;
cy: calc(
20 % +
10 px);
x:
40 px;
y: calc(
5 % +
10 px);
}
svg > svg > ellipse {
cx:
30 %;
cy:
100 px;
rx:
20 px;
ry:
40 px;
}
svg > svg > ellipse:nth-child(
2 ) {
transform: translate(
50 px, -
50 px);
}
svg ellipse {
cx:
10 px;
cy:
10 px;
rx:
10 px;
ry:
10 px;
}
foreignObject {
transform: translate(
450 px,
0 );
y:
200 px;
width:
80 px;
height:
130 px;
}
#r2 {
width:
50 px;
height:
50 px;
}
svg image {
x:
300 px;
y:
260 px;
height:
50 px;
}
use {
x:
400 px;
y:
310 px;
}
</
style >
<svg>
<g>
<rect x=
"0" y=
"-10" width=
"30px" height=
"10px" rx=
"-5px" ry=
"auto" fill=
"purple" />
<rect x=
" 40px /* some nonsense */ " y=
"150" width=
"30" height=
"20em" rx=
"20px" ry=
"20px" fill
="magenta" />
</g>
<circle cx="/* more nonsense */ 170" cy="340" r="-5px" fill="pink" />
<g transform="translate(150,0)" >
<circle id="c2" cx="20" cy="40" fill="skyblue" />
</g>
<svg x="300" width="200px" height="200px" viewBox="0 0 100 100" >
<ellipse fill="cyan" />
<ellipse fill="navy" />
</svg>
<foreignObject>
<svg>
<rect id="r2" style ="x:0;y:0" fill="brown" />
</svg>
</foreignObject>
<image href="data:image/svg+xml,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg '><rect width='100%' height='100%' fill='red' /></svg>" />
<defs>
<g id="g" >
<rect display="none" />
<rect width="80" height="80" fill="skyblue" />
</g>
</defs>
<use href="#g" />
</svg>
Messung V0.5 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.7 Sekunden
¤
*© Formatika GbR, Deutschland