I'm currently working on a website and I need help on a svg trapezoid shape.
I decided to use SVG because, before that, my trapezoid was realized with css and the main problem with that is that is wasn't responsive as I expected.
This is the shape I would like : Trapezoid.
I've already realized this shape but the problem is when the window size decrease the shape look like that.
So my question is, does there any ways to "lock" the points to keep the shape of the 1st image ?
HTML :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="84%" height="200" preserveAspectRatio="none">
<polygon fill="blue" points="1.5 0, 100 0, 85 100, 1.5 100"/>
...
</svg>
Edit:
Thanks to Paulie_D, i've patched my problem with :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="1.5 0, 100 0, 0 100, 1.5 100"/>
...
</svg>
But now I would like to add another trapezoid at the right of the 1st like that but as before, my problem isn't on how to realize the shape but on how it render with this code :
<div class="col-md-2 col-xs-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" transform="rotate(180)" class="spaceBetweenButton">
<polygon fill="#00a8f3" points="0 0, 130 0, 0 130, 0 130" />
</svg>
</div>
And how it appear. At first sight I thought that the problem was in the preserveAspectRatio so I've tried to replace it by xMaxYMin slice off but I didn't found a way to have a decent result with it.
So I have 2 problem, how to extend the right trapezoid (I think it's with the width of the svg) and how to move it on the left. I've tried to add margin but the space between the 2 trapezoid changes when we resize the window.
Thanks for your help.
Valentin.
Just add another polygon to your SVG.
Move the right hand end of the first polygon left a bit
Add a second polygon of the right shape, to the right of that, leaving an appropriate gap.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>
<polygon fill="#00a8f3" points="85 0, 100 0, 100 100, 0 100, 0 85"/>
</svg>
I want to create re-usable shapes that will automatically scale to fit the size of the given viewPort when used.
My approach is to enclose the shape in a 'symbol' element, and give it a viewBox with the same size as the shape itself.
This seems to work with a circle and a rectangle, but I am having trouble with a diamond shape, drawn using a path.
I have found a solution by creating a viewBox of (-1, -1, width+2, height+2), but I would like to know if this is officially supported, or if there is a better solution.
In the following example, the first shape is drawn directly, the second shape is derived from a 'use' element. If the viewBox starts with '0, 0', the left and top pixels are missing.
<html>
<svg width="200" height="200"
style="margin:20px; border: 1px solid gray">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
stroke="black" stroke-width="2"
stroke-linejoin="round" fill="transparent"
transform="translate(20, 20)"/>
</svg>
<svg style="display:none">
<symbol id="gw" viewBox="-1 -1 162 162">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
stroke="black" stroke-width="2"
stroke-linejoin="round" fill="transparent"/>
</symbol>
</svg>
<svg width="200" height="200"
style="margin:20px; border: 1px solid gray">
<use href="#gw" width="160" height="160" transform="translate(20, 20)"/>
</svg>
</html>
This took me a while to debug - my issue was that I specified the viewbox as viewbox and not viewBox, so the viewBox wasn't even being applied. Check your capitalization!
It seems that negative coords for the origin are supported: https://www.w3.org/TR/SVG/coords.html implies that there is no restriction on the first two parts of a 'viewbox'. I've seen elsewhere that people sometimes use negative coords on a viewbox.
I have a svg in my page which forces its container's height. It moves other elements... Is it possible to change svg's height? Now svg element is a square and a rectangle will be better because height is too big.
<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"
viewBox="0 0 60 60" enable-background="new 0 0 30 30" xml:space="preserve" width="50%" height="11%">
<path fill="none" stroke="white" stroke-miterlimit="10" d="M19.7,7.6C15.3,4,9.1,4.1,5.3,7.7c-3.2,3-4,8-2.1,12
c2.1,4.4,7.1,6.6,11.3,5.7c2.6-0.5,4.3-2.1,5.1-2.9"/>
<line fill="none" stroke="white" stroke-width="1.1572" stroke-miterlimit="10" x1="19.3" y1="7.3" x2="10.8" y2="15.5"/>
<line fill="none" stroke="white" stroke-width="1.3426" stroke-miterlimit="10" x1="10.9" y1="14.8" x2="19.7" y2="23.2"/>
<line fill="none" stroke="none" stroke-width="1.1322" stroke-miterlimit="10" x1="14.7" y1="15.4" x2="23.5" y2="7.1"/>
<line fill="none" stroke="none" stroke-width="0.9577" stroke-miterlimit="10" x1="14.9" y1="14.9" x2="22.7" y2="22.6"/>
<path fill="none" stroke="none" stroke-width="1.0915" stroke-miterlimit="10" d="M22.9,7.2c0.3,0.1,0.6,0.4,1,0.7
c1.8,1.4,3.9,4.2,3.4,7.9c-0.4,3-2.4,5.6-5.2,6.7"/>
<text x="20" y="18" fill="White" class="textsvg" font-size="10">MENU</text>
</svg>
[Jsfiddle][1]
Thanks!
Look on this updated jsFiddle: https://jsfiddle.net/qqzox761/1/
I removed width and height from your svg and changed viewBox a little bit.
Now with this code of svg you can set size in css.
Change the viewbox attribute, here:
<svg ... viewBox="0 0 60 60" ...
It means it is a square SVG that starts at 0, 0 and have a size of 60 on each side. Changing this will only affect the aspect ratio of SVG view, you can assign its width more accurately in pixels or percent using CSS.
As noted by mwl, you need to delete the width and height from <svg>. The program you used to create the graphic adds data to viewbox automatically so while mwl modified it, it looks like you had extra white space when you saved the file. I also recreated your fiddle here but without the white space. The important thing to remember about SVG is that it's all about scaling which means, in part, that preserving the aspect ratio is more important than pixel dimensions. This is a great article by Amelia Bellany-Royds on CSS-Tricks if you want more information.
I trying to set the icon width at 100% of the svg container. This is my problem:
And this is the code for SVG icon
<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"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" class="icon">
<path width="100px" height="100px" fill-rule="evenodd" clip-rule="evenodd" d="M79.941,43.641h-4c-1.104,0-2-0.895-2-2c0-1.104,0.896-1.998,2-1.998h4
c1.104,0,1.999,0.895,1.999,1.998C81.94,42.747,81.046,43.641,79.941,43.641z M72.084,30.329c-0.781,0.781-2.047,0.781-2.828,0
c-0.781-0.78-0.781-2.047,0-2.827l2.828-2.828c0.781-0.781,2.047-0.781,2.828,0c0.781,0.78,0.781,2.047,0,2.828L72.084,30.329z
M69.137,45.936L69.137,45.936c1.749,2.086,2.806,4.77,2.806,7.706l0,0c0,5.227-3.349,9.66-8.014,11.305
c-0.027-1.336-0.434-2.66-1.222-3.807c3.054-1.127,5.235-4.055,5.235-7.498c0-4.418-3.581-8-7.999-8
c-1.601,0-3.083,0.482-4.333,1.291c-1.232-5.316-5.974-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999
c0,1.404,0.254,2.746,0.697,4h0.015c0.975,2.74,2.895,5.031,5.395,6.445l-0.058,0.057c-0.98,0.98-1.596,2.184-1.872,3.445
c-3.751-2.107-6.551-5.686-7.652-9.947l0,0c-0.33-1.281-0.524-2.617-0.524-4c0-8.836,7.163-15.998,15.998-15.998
c1.572,0,3.089,0.232,4.523,0.654c2.195-2.827,5.618-4.654,9.475-4.654c6.627,0,11.999,5.372,11.999,11.998
C69.942,43.157,69.649,44.602,69.137,45.936z M57.943,33.644c-2.212,0-4.214,0.898-5.662,2.35c2.34,1.436,4.286,3.453,5.629,5.853
c0.664-0.113,1.337-0.205,2.033-0.205c2.126,0,4.118,0.559,5.85,1.527l0,0c0.096-0.494,0.149-1.004,0.149-1.527
C65.942,37.225,62.361,33.644,57.943,33.644z M57.943,25.644c-1.104,0-1.999-0.895-1.999-1.999v-3.999c0-1.105,0.895-2,1.999-2
s2,0.895,2,2v3.999C59.943,24.749,59.048,25.644,57.943,25.644z M43.804,30.329l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828
c0.78-0.781,2.047-0.781,2.828,0l2.828,2.828c0.78,0.78,0.78,2.047,0,2.827C45.851,31.11,44.584,31.11,43.804,30.329z
M42.945,60.851l2.121,2.121c1.172,1.172,1.172,3.07,0,4.242c-1.171,1.172-3.07,1.172-4.242,0c-1.171-1.172-1.171-3.07,0-4.242
L42.945,60.851z M49.944,68.849l2.121,2.121c1.172,1.172,1.172,3.072,0,4.242c-1.171,1.172-3.07,1.172-4.242,0
c-1.171-1.17-1.171-3.07,0-4.242L49.944,68.849z M56.943,60.851l2.121,2.121c1.172,1.172,1.172,3.07,0,4.242
c-1.171,1.172-3.07,1.172-4.241,0c-1.172-1.172-1.172-3.07,0-4.242L56.943,60.851z"/>
</svg>
Thanks
As mentioned by Robert Longson you can transform (scale) the path to the correct size and transform (translate) it to ensure it maintains the correct position
JSfiddle Demo
Additional SVG Path Info
transform="translate(-40,-28) scale(1.66)
The values are for this path / viewbox configuration.
As an alternative, you should look into redrawing the path based on a set viewbox intended for this path to fill the viewbox.