CODEWITHSUNDEEP
htmlsvg
celsomtrindade
celsomtrindade

Reputation: 4671

properly align svg polygon

So, i've been trying to make a portfolio page and i want to use custom shapes. So instead of use divs, i'm using a svg polygon shape to have the background img. Note, this is the first time i deal with svg and i'm trying to fix it the whole day.

So basically, the problem is, the border on the left-bottom and on the top-right is cutting out the edge of my shpe. I tried to reduce the the width/height of the polygon but it's not working properly. It stays to small or cut even more making it a swuare shape..

This is my html code and also a working jsfiddle: http://jsfiddle.net/1rmd2otz/1/

<div class="sv-img">
    <svg class="svg" viewBox="0 0 910 500" >
        <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490">
                <image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" />
            </pattern>
        </defs>
        <polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>
    </svg>
</div>

So, can anyone help me?

Upvotes: 0

Views: 1185

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Okay I see a couple of things wrong. Let's start with the first and work through it.

For a start, your polygon is 900x490, but you are specifying a pattern with dimensions of 890x480. So that's part of the reason why you are getting "trimmed" corners - your pattern isn't extending the full width and height of the polygon.

If we fix that, we get almost there. I've added a red line to show the polygon outline more clearly.

Here's a demo.

It is still not quite right. There are still little gaps at the top and bottom. The reason for this is because the aspect ratio of your polygon/pattern (900/490 ~= 1.84) is not the same as the aspect ratio of your image (570/300 = 1.9). What the renderer is doing is scaling the 500x370 image up to fit inside the dimensions you specify for your <image>, whilst keeping the same aspect ratio. That results in an image that is 900 x 473.7 (473.7 = 900/1.9), centred vertically in your 900x490 pattern. That's leaving roughly 6 pixels at the top and bottom.

There are a few ways to fix that. Obviously one would be to change either the image or the polygon so their aspect ratios match exactly.

Another way to fix this is to change the way the image gets scaled. By default, the image gets scaled up to fit the width and height you specify, but doesn't go outside those dimensions. This means that sometimes a gap will be left - like we are seeing. You can change it to a different scaling mode which tells it to scale to fit the maximum dimension leaving no gaps. You do that by setting preserveAspectRatio="xMidYMid slice" on the image.

<image xlink:href="[...snip...]"
       x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/>

Here's a demo of that.

You can see that the polygon is completely filled now.

You can read more about preserveAspectRatio here.

Upvotes: 1

rfornal
rfornal

Reputation: 5122

It looks like your issue is in the polygon points. Change ...

<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/>

To ...

<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/>

jsFiddle: http://jsfiddle.net/rfornal/1rmd2otz/3/

This may not be EXACTLY what you want, but should get you moving in the right direction. You MIGHT be able to do this on the other side and change the SVG viewBox values (widen them).

Upvotes: 0

Related Questions