Question 233582 in Html Question posted in
Some basic documentation can be found here.

Html – Specifying the Stroke Alignment for an SVG Circle?

This demo has an SVG circle with a stroke. The stroke-alignment property has been set to outer, but the stroke still overlaps the fill of the circle.

How to we get the stroke to position itself to the outside of the circle?

<body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 240 240"
      height="240"
      width="240"
    >
      <defs><!--bindings={}--><!--bindings={}--></defs>
      <circle
        cx="120"
        cy="120"
        r="100"
        fill="blue"
        fill-opacity="1"
        stroke="red"
        stroke-opacity="0.5"
        stroke-width="40"
        ,
        stroke-alignment="outer"
      ></circle>
    </svg>
  </body>
Tags:

2

Answers


  1. 0

    Looks like stroke-alignment is not supprted (yet?).
    But you might do something like this:

    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 240 240" height="240" width="240">          
  <circle
    cx="120"
    cy="120"
    r="120"
    fill="#f007"
  />
  <circle
    cx="120"
    cy="120"
    r="100"
    fill="blue"
  />
</svg>
    Login or Signup to reply.
  2. 0

    As long as the fill is opaque, you can also use the paint-order CSS property/presentation attribute. The position of the stroke remains unchanged, but the inner half that overlaps the fill gets hidden behind it. So to achieve a visible stroke width of 20, you need to actually set stroke-width="40".

    For a partially transparent fill, the inner half of the stroke shines through.

    <svg
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMidYMid meet"
  viewBox="0 0 500 240"
  height="240"
  width="240"
>
  <circle
    cx="120"
    cy="120"
    r="100"
    fill="blue"
    fill-opacity="1"
    stroke="red"
    stroke-opacity="0.5"
    stroke-width="40"
    paint-order="stroke fill"
  ></circle>
  <circle
    cx="380"
    cy="120"
    r="100"
    fill="blue"
    fill-opacity="0.5"
    stroke="red"
    stroke-opacity="1"
    stroke-width="40"
    paint-order="stroke fill"
  ></circle>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search