blob: 22649241937605846f98dc457043a5a6cfd14bb4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">
<style type="text/css" >
rect {
stroke-width: 30px;
}
</style>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0" stop-color="blue"/>
<stop offset="1" stop-color="yellow"/>
</linearGradient>
<linearGradient id="grad2" x1="360" y1="500" x2="560" y2="600" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)">
<stop offset="0" stop-color="blue"/>
<stop offset="1" stop-color="yellow"/>
</linearGradient>
<pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)">
<rect x="0" y="0" width="20" height="20" fill="red"/>
<rect x="20" y="0" width="20" height="20" fill="green"/>
<rect x="0" y="20" width="20" height="20" fill="blue"/>
<rect x="20" y="20" width="20" height="20" fill="yellow"/>
</pattern>
<rect id="rect" width="200" height="100" fill="none"/>
</defs>
<rect x="40" y="40" width="200" height="100" fill="none" stroke="url(#grad1)"/>
<rect x="40" y="200" width="200" height="100" fill="none" stroke="url(#grad2)" />
<use xlink:href="#rect" transform="translate(40, 360)" stroke="url(#pattern)"/>
<use xlink:href="#rect" x="40" y="520" stroke="green"/>
</svg>
|
