CODEWITHSUNDEEP
cssreactjssvg
Flightdoc5242
Flightdoc5242

Reputation: 209

SVG Polyline chevron at beginning of line

I am new to SVG, I understand that in a polyline the points are X-Y coordinates. I have an SVG where its a line, and a chevon at the end (like an accordion dropdown). I need to have the chevon at the begging of the line instead of the end

enter image description here

Code:

 <div style={{ width: "225px", height: "12px" }}>
      <svg style={{ width: "100%", height: "100%" }} viewBox="0 0 1875 100">
        <polyline
          points="0 10,1625 10,1750 90,1875 10"
          style={{
            fill: "none",
            stroke: "red",
            strokeWidth: "10",
            width: "100%",
            height: "100%"
          }}
        />
      </svg>
    </div>

I have messed with the points, but somehow I seem to be missing something in order to put the chevron at the beginning

Upvotes: 1

Views: 321

Answers (1)

doğukan
doğukan

Reputation: 27391

Update your points as "0 10,125 90,250 10,1875 10"

<div style="width: 225px; height: 12px">
  <svg style="width: 100%; height: 100%" viewBox="0 0 1875 100">
  <polyline points="0 10,125 90,250 10,1875 10"
style = "fill: none; stroke: red; stroke-width: 10; width: 100%; height: 100%" />
  </svg>
</div>

To increase the line width, you should set the SVG to preserveAspectRatio="none" and keep same the viewBox width and last point of polyline. But note that, the chevron will not have a static width.

<div style="width: 100%; height: 12px">
  <svg preserveAspectRatio="none" style="width: 100%; height: 100%" viewBox="0 0 8000 100">
  <polyline points="0 10,125 90,250 10,8000 10"
style = "fill: none; stroke: red; stroke-width: 10; width: 100%; height: 100%" />
  </svg>
</div>

Upvotes: 1

Related Questions