SVG gradient for perfectly horizontal path

by

The default for gradientUnits is objectBoundingBox. The key issue you have is described in the last paragraph of the specification text…

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

Why not use a rect with a fill rather than a path with a stroke if you’ve got a horizontal line? Or alternatively use userSpaceOnUse units.

More Related Contents:

  1. Can I apply a gradient along an SVG path?
  2. Why does sudo change the PATH? [closed]
  3. How to add a folder to `Path` environment variable in Windows 10 (with screenshots)
  4. How to change the Jupyter start-up folder
  5. How do I include a path to libraries in g++
  6. How to add include path in Qt Creator?
  7. Windows 7 – Add Path
  8. How to create multiple output paths in Webpack config
  9. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  10. How to get folder path from file path with CMD
  11. Dump include paths from g++
  12. How to keep from duplicating path variable in csh
  13. SVG gradient using CSS
  14. SPARQL property path queries with arbitrary properties
  15. How to add a set path only for that batch file executing?
  16. How to replace a path with another path in sed? [duplicate]
  17. svg multiple color on circle stroke
  18. SVG angular gradient
  19. So what IS the right direction of the path’s slash (/ or \) under Windows?
  20. Does MAX_PATH issue still exists in Windows 10
  21. How do you install an MSI with msiexec into a specific directory?
  22. msys path conversion (or cygpath for msys?)
  23. Find the path to the executable
  24. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  25. draw text in d3 arc javascript
  26. Convert SVG to PNG with applied images as background to svg elements
  27. Android, move bitmap along a path?
  28. What sets up sys.path with Python, and when?
  29. How to Include CSS style when converting svg to png
  30. jQuery SVG vs. Raphael [closed]

Leave a Comment