12345678910111213141516171819202122232425262728293031323334 |
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <style type="text/css" >
- rect {
- stroke-width: 15px;
- }
- </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="180" y1="250" x2="280" y2="300" 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="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)">
- <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 id="rect" width="100" height="50" fill="none"/>
- </defs>
- <rect x="20" y="20" width="100" height="50" fill="none" stroke="url(#grad1)"/>
- <rect x="20" y="100" width="100" height="50" fill="none" stroke="url(#grad2)" />
- <use xlink:href="#rect" transform="translate(20, 180)" stroke="url(#pattern)"/>
- <use xlink:href="#rect" x="20" y="260" stroke="green"/>
- </svg>
|