I am trying to use SVG polygon to create a bottom triangle like shown in the below image:
So far, I have done this:
<svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<svg width="100%" x="0">
<polygon points="0 0,50 50,100 0,100 100,0 100" fill="#424963"></polygon>
</svg>
<svg height="200px" width="50%" x="50%">
<polygon points="0 50,100 0,100 100,0 100" fill="#ED0F0C"></polygon>
</svg>
</svg>
I am unable to get that red triangle positioned properly. Can someone guide me through this?
Thanks.
For reference to the spec read here
You're on the right path, adjusting the values of the polygon points will get you to where you need to be.
Something like this will do the trick:
<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect width="100%" height="50%" fill="#2f3753"/>
<svg width="100%" x="0">
<polygon points="0 25,50 50,100 25,100 50,0 50" fill="#424963"></polygon>
</svg>
<svg height="200px" width="50%" x="50%">
<polygon points="0, 50, 220, -50, 60, 0" fill="#ED0F0C"></polygon>
</svg>
</svg>
You'll also notice I've added in the rect to set the SVG background. Removing this or changing the fill will remove/change the background.
Related
So basically I have a triangular shape and I want to mask it in an image/gif.
<svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
<div class="clipSvg2">
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask11">
<!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/>
</svg>
-->
</mask>
</defs>
//Here add some mask=url(#mask11)
<image
width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image>
</svg>
</div>
As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows.
The second is a mask. In the mask the path has a white fill – that is what makes the image show.
In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG.
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="cp1">
<path clip-rule="evenodd"
d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" />
</clipPath>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
clip-path="url(#cp1)"/>
</svg>
<svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="m1">
<path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z"
fill="white"/>
</mask>
</defs>
<image width="100%" height="100%"
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"
mask="url(#m1)"/>
</svg>
https://jsfiddle.net/4n7j5a1t/
I'm using a svg shape divider but how I can change the background color to a background image in the fill CSS property ?
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
This is what I have tried so far but it does not keep the svg shape in place (wave):
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="120" height="250"
xlink:href="https://example.com/slider-bg.png"/>
</pattern>
</defs>
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill" fill="url(#imgpattern)"></path>
</svg>
Thanks.
EDIT
You have to define the image and then add it as a fill.
You can read more about this here
I'm not sure if this is what you wanted but I hope it helps. If not try to explain a little more and I might be able to help you.
Cheers!
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://image.api.playstation.com/vulcan/img/rnd/202011/0714/vuF88yWPSnDfmFJVTyNJpVwW.png" x="0" y="0"
width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path fill="url(#img1")" d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
I have an SVG used as a divider and I was wondering if on the curve of the svg, I can add a blue or black border that follows the path of the curve.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
Sure - just draw a path with a stroke on top of the shape.
<svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
<path fill="none" stroke="grey" stroke-width="1px" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0"></path>
</svg>
You can also stroke the original path and use a stroke-dasharray of the appropriate construction to make the dash cover just the top of the shape. Or you can use a svg filter to add a border to the top edge. Just drawing the border explicitly is the most straightforward.
You can use the CSS filter property if you can't directly edit the SVG to add the path (which might be a better way to go).
svg path {
filter: drop-shadow(0 -2px 0 blue);
}
<svg class="curve" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<path fill="#f4f6ff" d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
I'm trying to put a polygon in front of this green rectangle, so it can look like Brazil flag. My code:
<svg class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon x=0 y=0 points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>
Funny thing is that polygon element is not appearing in the front of the rectangle, and it's getting me confused. I had made a Denmark flag svg, and it looked just fine, with white strips appearing in front of the red rectangle as they supposed to, my code for Denmark flag:
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#C60C30"/>
<rect x=200 y=0 height=450 width=60 fill="#FFF"/>
<rect x=0 y=175 height=60 width=800 fill="#FFF"/>
</svg>
I wish it had some way of doing the same for Brazil flag
Added viewBox="0 0 450 800" and transform="translate(-175 0)"
Which will set the right position for the yellow diamond
<svg class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 800">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon transform="translate(-175 0)" points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>
<svg height="500" width="800" class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>
Add height and width to svg. It will work.
it should work. (add a viewBox="0 0 450 800")
<svg id="svg" viewBox="0 0 450 800">
<rect x="0" y="0" width="800" height="450" class="handle" polygonNo="0" pointNo="0" fill="green"></rect>
<polygon points="400,0 800,225 400,450 0,225" id="polygon" polygonNo="1" fill="yellow"></polygon>
<circle cx="400" cy="225" r="100"
fill="blue"></circle>
</svg>
I need to flip this SVG horizontally - can't find anything online. Here it is:
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
Any help appreciated, cheers!
You can just set a transform to flip things and then move the shape (as it's flipped about the origin).
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path transform="scale(1, -1) translate(0, -100)" d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>
If you can use CSS (this does not work when imported into Inkscape as of today), you can also use a CSS scale transform, which has the advantage that it is based on the element's center by default: transform: scale(-1,1);
<svg id="bigHalfCircle" style="display: block; transform: scale(-1,1)" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0,100 C 40,0 60,0 100,100 Z"/>
</svg>