CODEWITHSUNDEEP
svgalignmentpolygon
RuslanAhmetov
RuslanAhmetov

Reputation: 1

Align top polygon object

I'm rendering a triangle shape via svg. When it's at full width it sticks to the top of the div, but if I make the window smaller the polygon moves down. I tried to find a way to stick it to the top but with no success.

Here is the code.

    <div>

        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="100%" height="100px" viewBox="0 0 960 100" enable-background="new 0 0 960 100" xml:space="preserve">
        <polygon fill="#22262E" points="959.746,0 480.882,96.009 2.018,0 "/>
        </svg>

    </div>

Please help me to find a solution.

Thanks.

Upvotes: 0

Views: 118

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Add preserveAspectRatio="xMidYMin meet" to your <svg> tag. It tells the renderer to position the content at the top centre of your viewport.

Upvotes: 1

Related Questions