Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
michael@0 | 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" reftest-zoom="2" overflow="hidden"> |
michael@0 | 2 | <style type="text/css" > |
michael@0 | 3 | rect { |
michael@0 | 4 | stroke-width: 15px; |
michael@0 | 5 | vector-effect: non-scaling-stroke; |
michael@0 | 6 | } |
michael@0 | 7 | </style> |
michael@0 | 8 | <defs> |
michael@0 | 9 | <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> |
michael@0 | 10 | <stop offset="0" stop-color="blue"/> |
michael@0 | 11 | <stop offset="1" stop-color="yellow"/> |
michael@0 | 12 | </linearGradient> |
michael@0 | 13 | <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse"> |
michael@0 | 14 | <stop offset="0" stop-color="blue"/> |
michael@0 | 15 | <stop offset="1" stop-color="yellow"/> |
michael@0 | 16 | </linearGradient> |
michael@0 | 17 | <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)"> |
michael@0 | 18 | <rect x="0" y="0" width="10" height="10" fill="red"/> |
michael@0 | 19 | <rect x="10" y="0" width="10" height="10" fill="green"/> |
michael@0 | 20 | <rect x="0" y="10" width="10" height="10" fill="blue"/> |
michael@0 | 21 | <rect x="10" y="10" width="10" height="10" fill="yellow"/> |
michael@0 | 22 | </pattern> |
michael@0 | 23 | <rect id="rect" width="400" height="50" fill="none"/> |
michael@0 | 24 | </defs> |
michael@0 | 25 | |
michael@0 | 26 | <g transform="translate(20,20)"> |
michael@0 | 27 | <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/> |
michael@0 | 28 | </g> |
michael@0 | 29 | |
michael@0 | 30 | <rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/> |
michael@0 | 31 | |
michael@0 | 32 | <use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/> |
michael@0 | 33 | |
michael@0 | 34 | <use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/> |
michael@0 | 35 | |
michael@0 | 36 | </svg> |