Can you control how an SVG’s stroke-width is drawn?

by

No, you cannot specify whether the stroke is drawn inside or outside an element. I made a proposal to the SVG working group for this functionality in 2003, but it received no support (or discussion).

SVG proposed stroke-location example, from phrogz.net/SVG/stroke-location.svg

As I noted in the proposal,

  • you can achieve the same visual result as “inside” by doubling your stroke width and then using a clipping path to clip the object to itself, and
  • you can achieve the same visual result as ‘outside’ by doubling the stroke width and then overlaying a no-stroke copy of the object on top of itself.

Edit: This answer may be wrong in the future. It should be possible to achieve these results using SVG Vector Effects, by combining veStrokePath with veIntersect (for ‘inside’) or with veExclude (for ‘outside). However, Vector Effects are still a working draft module with no implementations that I can yet find.

Edit 2: The SVG 2 draft specification includes a stroke-alignment property (with center|inside|outside possible values). This property may make it into UAs eventually.

Edit 3: Amusingly and dissapointingly, the SVG working group has removed stroke-alignment from SVG 2. You can see some of the concerns described after the prose here.

More Related Contents:

  1. svg text wrapping issues
  2. How to calculate the SVG Path for an arc (of a circle)
  3. Circle drawing with SVG’s arc path
  4. How to convert a PNG image to a SVG? [closed]
  5. Removing transforms in SVG files
  6. How to use the viewBox attribute?
  7. How to set transform origin in SVG
  8. Remove the host HTML element selectors created by angular component
  9. How many levels of recursion does SVG support?
  10. SVG Line with Gradient Stroke Won’t Display if vertical or horizontal
  11. Add custom icons to font awesome
  12. Catmull-Rom interpolation on SVG Paths
  13. Find svg viewbox that trim whitespace around
  14. Scale and mirror SVG object
  15. How to convert a SVG to a PNG with ImageMagick?
  16. vertical alignment of text element in SVG
  17. SVG shadow cut off
  18. How to place multiple evenly-spaced arrowheads along an SVG line?
  19. SVG Positioning
  20. svg multiple color on circle stroke
  21. How can I cut one shape inside another?
  22. Do SVG docs support custom data- attributes?
  23. SVG angular gradient
  24. Can I apply a gradient along an SVG path?
  25. Add text/label onto links in D3 force directed graph
  26. SVG Image in JavaFX 2.2
  27. Simple fill pattern in svg : diagonal hatching
  28. Pure SVG way to fit text to a box
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. Convert SVG polygon to path

Leave a Comment