CODEWITHSUNDEEP
csssvg
Lyokolux
Lyokolux

Reputation: 1417

Adding border-right like to a SVG <path> element

I am wandering how to draw a border-right to this svg square.

<div>
  <svg>
    <path fill="rgba(199, 205, 217, 0.2)" d="M 154.5 10 L 154.5 399 L 407.5 399 L 407.5 10 Z" style="border: 1px solid red;"></path>
  </svg>
</div>

So it is not possible to use stroke nor outline as they draw a border all around the element (explained in this issue SVG path with border).

A constraint: I am not able to modify the SVG.

The best should be a css solution only. I don't know if it is feasible.

Upvotes: 0

Views: 414

Answers (1)

Robert Longson
Robert Longson

Reputation: 124229

You can put strokes where you want with stroke-dasharray.

If you want to know where the numbers are from they are just the side lengths of the shape.

svg {
  width: 500px;
  height: 500px;
}

path {
  stroke-dasharray: 0 642 389 253;
  stroke: red;
}
<div>
  <svg>
    <path fill="rgba(199, 205, 217, 0.2)" d="M 154.5 10 L 154.5 399 L 407.5 399 L 407.5 10 Z" ></path>
  </svg>
</div>

Upvotes: 2

Related Questions