SVG Line with Gradient Stroke Won’t Display if vertical or horizontal

by

You are getting caught out by the last paragraph in this part of the SVG specification

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.

objectBoundingBox is the default for gradientUnits so you need to use gradientUnits=”userSpaceOnUse” and then adjust the values to be appropriate for the different coordinate system.

More Related Contents:

  1. How to place multiple evenly-spaced arrowheads along an SVG line?
  2. svg multiple color on circle stroke
  3. SVG angular gradient
  4. Can I apply a gradient along an SVG path?
  5. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  6. How to calculate the SVG Path for an arc (of a circle)
  7. How to convert a PNG image to a SVG? [closed]
  8. Removing transforms in SVG files
  9. How to use the viewBox attribute?
  10. How to set transform origin in SVG
  11. Remove the host HTML element selectors created by angular component
  12. How many levels of recursion does SVG support?
  13. Add custom icons to font awesome
  14. Catmull-Rom interpolation on SVG Paths
  15. Find svg viewbox that trim whitespace around
  16. Default background color of SVG root element
  17. Scale and mirror SVG object
  18. How to convert a SVG to a PNG with ImageMagick?
  19. SVG shadow cut off
  20. Crop to fit an svg pattern
  21. SVG Positioning
  22. How can I cut one shape inside another?
  23. Avoiding lines between adjecent svg rectangles
  24. Adding feDropShadow to a vertical line in SVG makes it disappear
  25. Add text/label onto links in D3 force directed graph
  26. SVG gradient for perfectly horizontal path
  27. Converting an svg arc to lines
  28. Pure SVG way to fit text to a box
  29. SVG images blocked by gmail proxy
  30. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

Leave a Comment