non-scaling-stroke-01.svg 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637
  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. vector-effect: non-scaling-stroke;
  6. }
  7. </style>
  8. <defs>
  9. <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
  10. <stop offset="0" stop-color="blue"/>
  11. <stop offset="1" stop-color="yellow"/>
  12. </linearGradient>
  13. <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse">
  14. <stop offset="0" stop-color="blue"/>
  15. <stop offset="1" stop-color="yellow"/>
  16. </linearGradient>
  17. <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)">
  18. <rect x="0" y="0" width="10" height="10" fill="red"/>
  19. <rect x="10" y="0" width="10" height="10" fill="green"/>
  20. <rect x="0" y="10" width="10" height="10" fill="blue"/>
  21. <rect x="10" y="10" width="10" height="10" fill="yellow"/>
  22. </pattern>
  23. <rect id="rect" width="400" height="50" fill="none"/>
  24. </defs>
  25. <g transform="translate(20,20)">
  26. <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/>
  27. </g>
  28. <rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/>
  29. <use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/>
  30. <use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/>
  31. </svg>