non-scaling-stroke-01-ref.svg 1.3 KB

12345678910111213141516171819202122232425262728293031323334
  1. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  2. <style type="text/css" >
  3. rect {
  4. stroke-width: 15px;
  5. }
  6. </style>
  7. <defs>
  8. <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
  9. <stop offset="0" stop-color="blue"/>
  10. <stop offset="1" stop-color="yellow"/>
  11. </linearGradient>
  12. <linearGradient id="grad2" x1="180" y1="250" x2="280" y2="300" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)">
  13. <stop offset="0" stop-color="blue"/>
  14. <stop offset="1" stop-color="yellow"/>
  15. </linearGradient>
  16. <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)">
  17. <rect x="0" y="0" width="10" height="10" fill="red"/>
  18. <rect x="10" y="0" width="10" height="10" fill="green"/>
  19. <rect x="0" y="10" width="10" height="10" fill="blue"/>
  20. <rect x="10" y="10" width="10" height="10" fill="yellow"/>
  21. </pattern>
  22. <rect id="rect" width="100" height="50" fill="none"/>
  23. </defs>
  24. <rect x="20" y="20" width="100" height="50" fill="none" stroke="url(#grad1)"/>
  25. <rect x="20" y="100" width="100" height="50" fill="none" stroke="url(#grad2)" />
  26. <use xlink:href="#rect" transform="translate(20, 180)" stroke="url(#pattern)"/>
  27. <use xlink:href="#rect" x="20" y="260" stroke="green"/>
  28. </svg>