This is not a duplicate of any current questions that I can find. I have tried answers such as adding block/flex to the SVG element but I believe this is a different .
I am using Tailwind if that is of any relevance.
This is one of the multiple, different SVGs that this issue is present on:
<svg style="width: 100%" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" y="0px" x="0px" xml:space="preserve" version="1.1" viewBox="0 0 1917.4503 99.737572" id="Untitled-Page%201">
<metadata id="metadata64">
<rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf>
</metadata>
<defs id="defs62">
<clipPath id="clipPath83" clipPathUnits="userSpaceOnUse">
<rect y="4.6582928" x="1.9868355" height="520.61298" width="1913.6428" id="rect85" style="fill: #0000ff; fill-rule: evenodd"></rect>
</clipPath>
<clipPath id="clipPath101" clipPathUnits="userSpaceOnUse">
<rect y="2.0105031" x="1.6986296" height="99.737572" width="1917.4503" id="rect103" style="fill: #0000ff; fill-rule: evenodd"></rect>
</clipPath>
</defs>
<g transform="translate(-1.6986296,-2.0105031)" clip-path="url(#clipPath101)" id="g79">
<path id="110" d="m -92.8182,485.3333 c 148.4834,-10.021 80.7045,-8.8997 264.4613,-8.8997 211.3321,0 442.2889,49.5664 666.4687,49.5664 255.8733,0 518.9805,-59.2854 737.5684,-59.2854 335.3557,0 441.894,29.1565 441.894,29.1565 L 2035,256 c 0,0 -38.1606,11.5786 -106.04,22.415 L 1919,33.9229 c 0,0 -67.2518,32.8281 -278.9438,32.8281 C 1502.0735,66.751 1335.988,0 1174.4691,0 1032.9564,0 887.1659,55.8081 753.7633,55.8081 619.0213,55.8081 489.1034,1.0942 387.7024,1.0942 230.6074,1.0942 -14,33.9229 -14,33.9229 l -0.0303,192.3195 c 0,0 -30.8519,-4.4524 3.0303,-5.3425 v 77.905 c -115.2449,9.8118 -4.7734,-2.7802 -103.0303,4.7102" fill="#4d5061"></path>
</g>
</svg>
I have multiple SVG elements that I am using to create a wave-like effect. In the picture below, you can see the top section which is the SVG and underneath it you can see the background of the content.
This issue only appears at certain resolutions and the thickness of the line varies between what appears to be half a pixel and 1 pixel in height.
The behaviour occurs both when the SVG is inline or as an IMG. The SVG itself is styled to be 100% width with height set to auto.
I've noticed that tweaking the viewbox allows the SVG to line up properly but this only makes the gap appear at different resolutions instead.
I need a solution that will make this wave SVG sit flush with no pixel gap on all devices, and ideally an explanation to why it is behaving this way because I've been bashing my head against this for too long.
There are multiple SVGs and this problem occurs with all of them.
Fixed this by adding a -1px margin to either the top or the bottom of SVG element to overlap the elements together.
You can put your image and the following div inside a flex with flex-direction colum.
Without flex:
With flex wrapper:
.box {
height:100px;
background-color:#00cba9;
margin:0;
}
svg{
padding-bottom:0;
margin-bottom:0;
border:solid red 3px;
}
.wrapper{
display:flex;
flex-direction: column;
}
<div class="wrapper">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg>
<div class="box"></div>
</div>
Related
I have an SVG on my page. This SVG is a white wave that creates a nice wave effect on the hero image for the page. But the SVG's Path (drawing) crawls up the page when the screen width decreases, creating a gap between itself and the hero image.
How do I align this SVG Path so it stays on the bottom?
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-radius: none;
}
<svg
height="100%"
width="100%"
id="svg"
viewBox="0 0 1440 1"
xmlns="http://www.w3.org/2000/svg"
className="wave"
>
<path
d="M 0,400 C 0,400 0,200 0,200 C 153.19999999999993,213.06666666666666 306.39999999999986,226.13333333333335 449,220 C 591.6000000000001,213.86666666666665 723.6000000000001,188.53333333333333 887,182 C 1050.3999999999999,175.46666666666667 1245.1999999999998,187.73333333333335 1440,200 C 1440,200 1440,400 1440,400 Z"
stroke="none"
stroke-width="0"
fill="#ffffff"
></path>
</svg>
Here is an image of what is happening.
The size and scale of the viewbox (& graphics inside) is controlled by the preserveAspectRatio attribute on the svg.
By default, the viewbox is scaled uniformly to fit the size of the svg and centered horizontally and vertically. (Similar to how a background image would display with the following properties applied: background-position: center center; background-size: contain;)
This is why your path 'crawls up', the svg is positioned at the bottom of the hero but its contents is centered.
The preserveAspectRatio accepts two values, first is alignment, second (optional) is how it 'fits' inside the svg.
preserveAspectRatio="<align> [<meetOrSlice>]"
The mdn page about preserveAspectRatio is really helpful and gives a full list of examples. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
tldr:
To fix your issue, add preserveAspectRatio="xMidYMax meet" as an attribute of the SVG, EG:
<svg
height="100%"
width="100%"
id="svg"
viewBox="0 0 1440 234"
xmlns="http://www.w3.org/2000/svg"
className="wave"
preserveAspectRatio="xMidYMax meet"
>
...
</svg>
NB: The viewBox’s height needs to be big enough to contain the graphics, so has been increased. Kudos: Sphinxxx & enxaneta.
I'm trying to create an effect on an svg path with vector="non-scaling-stroke" with a drop shadow using filter: drop-shadow(...).
However, when the path is scaled to fit the screen (having this scaling is necessary) the path remains a a consistent size but the drop shadow stretches:
svg {
width: 1000px; /*just to simulate problem, these would be vw & vh units in practice*/
height: 200px;
}
path {
filter: drop-shadow(0px 0px 1px blue);
}
<svg preserveAspectRatio="none" viewBox="0 0 100 100">
<path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
</svg>
As you can see, the shadow is closely fitted around the horizontal section of the line but more spread on the vertical section. This is expected really but I'm wondering if there's any trick I'm missing to have the shadow be a consistent size around the line for the entire path.
As well as using css filter I've tried:
using svg filters drop shadow on the path.
placing a dummy path behind the line with a gaussian blur to simulate a shadow.
Both produce the same result.
I also understand I can resize the svg viewBox to fit the screen with js to avoid the scaling issues altogether but this is really a last resort if there are no other solutions.
Thanks!
I think, that this could work!
svg {
width: 1000px;
/*just to simulate problem, these would be vw & vh units in practice*/
height: 200px;
}
<svg preserveAspectRatio="none" viewBox="0 0 100 100">
<path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
<rect x="0" y="29" width="50" height="2" style="fill:blue;filter: blur(2px);" />
<rect x="49.8" y="29" width=".5" height="70" style="fill:blue;filter: blur(.5px);" />
</svg>
Ideally, I'd like to have this svg at the right side of my screen, and become mobile friendly. I was looking into media queries, but I realized I would have to code the exact position for every different media size. Let me know if there is an efficient way of making the svg position mobile friendly.
Here is the code:
<!-- side design neon pink -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.43" height="867.24" viewBox="0 0 87.43 867.24">
<defs>
<clipPath id="clip-path">
<rect width="87.43" height="867.24" fill="none"/>
</clipPath>
</defs>
<g id="Repeat_Grid_1" data-name="Repeat Grid 1" clip-path="url(#clip-path)">
<g transform="translate(-287.868 -0.348)">
<path id="wave_2_" data-name="wave (2)" d="M-40.233,309.629l67.77-59.788C55,217.986,69.618,180.03,124.543,186.934,179.469,193.353,274.7,243.422,329.627,237c54.925-6.9,130.937-40.482,185.862-53.806s88.765-3.969,143.69,27.886c54.926,32.339,109.851,32.339,137.314,32.339h27.463V359.7H.074Z" transform="matrix(-0.017, -1, 1, -0.017, 124.954, 830.456)" fill="#f638dc"/>
</g>
</g>
</svg>
Any help/comment is greatly appreciated. Thank you!
Try removing the width and height of the SVG.
Wrap SVG in parent container <div class =" container ">
And give it width and height in relative units.
This will make your application responsive.
.container {
width:5vw;
height:5vh;
}
<div class="container">
<!-- side design neon pink -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 87.43 867.24" style="border:1px solid">
<defs>
<clipPath id="clip-path">
<rect width="87.43" height="867.24" fill="none"/>
</clipPath>
</defs>
<g id="Repeat_Grid_1" data-name="Repeat Grid 1" clip-path="url(#clip-path)">
<g transform="translate(-287.868 -0.348)">
<path id="wave_2_" data-name="wave (2)" d="M-40.233,309.629l67.77-59.788C55,217.986,69.618,180.03,124.543,186.934,179.469,193.353,274.7,243.422,329.627,237c54.925-6.9,130.937-40.482,185.862-53.806s88.765-3.969,143.69,27.886c54.926,32.339,109.851,32.339,137.314,32.339h27.463V359.7H.074Z" transform="matrix(-0.017, -1, 1, -0.017, 124.954, 830.456)" fill="#f638dc"/>
</g>
</g>
</svg>
</div>
I added a class to my svg, then I added translate (im positioning for iphone x 375px
width):
.neon_pink_svg {
transform: translate(287.87px, -32px);
vertical-align: top;
overflow: hidden;
z-index: -1;
position: fixed;
}
I currently have two SVGs that were designed to interlock with eachother but the higher SVG (The first in the imgur link) acts as if it were a rectangle and "pushes" the lower SVG (The second picture in the imgur link) down away from it and they end up with a large space between them (The third imgur link). I have only changed the width of the second SVG in the code so far. Without manually aligning them, which would ruin my page's responsiveness, is there a way to give the SVG a smaller hitbox or similar?
https://imgur.com/a/YtBuso4
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1250">
<defs>
<style>
.cls-1 {
fill: #190eae;
}
</style>
</defs>
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<defs>
<style>
.cls-1 {
opacity: 0.7;
}
</style>
</defs>
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-1" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Thank you
I think the most simple solution to your problem is to lessen the viewBox height of the first <svg>, but to show the overflow. That way, the triangular form at the bottom will "slip" under the second <svg>
svg {
overflow:visible;
display:block;
}
.cls-1 {
fill: #190eae;
}
.cls-2 {
opacity: 0.7;
}
<svg id="svg-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<path id="bali-beautiful-beauty-433539" class="cls-1" d="M0,0H1920V1080L0,1250Z"/>
</svg>
<svg id="svg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 1080.021" id="sectiona">
<g id="Group_78" data-name="Group 78" transform="translate(-488 -3248.979)">
<path id="Path_26" data-name="Path 26" class="cls-2" d="M-1-16.511l960-85.021V978.489l-960-85Z" transform="translate(489 3350.511)"/>
</g>
</svg>
Note how I have moved the styles outside the SVGs. They are part of the same DOM anyway, and if both quote the same class name, both styles will be applied to both paths. I've changed the class name for one of them, so that does not happen.
Another issue is that <svg> elements in HTML are inline-blocks. As such they have a line height, and if they are displayed one below the other (as happens here because their default width is 100%), that may lead to a small visible gap between their layout boxes. Setting display:block solves that.
I am trying to display these social media icons on my website in such a way that I can change the color using css (so i can add the hover effect shown in the code below).
However, since these are vector image files (.svg) I couldn't seem to find a way to insert the image into my web page using the conventional <img src=""> method. So I proceeded to create CSS classes to get the image to appear as a CSS mask (thus allowing me to change the color via CSS).
However, I quickly noticed that the sides of the otherwise circular vector graphic icons were slightly cutoff. Being the perfectionist that I am, I wanted to make the icons actually appear round as they were supposed to. So, after checking out the webkit-mask MSDN entry I increased the width of the .media-buttons class and used -webkit-mask-position to shift the image a few pixels down and to the left as is evident in my code below. This obviously did not work.
It has also come to my attention that -webkit-mask is not fully supported by all browsers.
CSS:
#cross{-webkit-mask: url("http://path/to/image.svg") no-repeat;}
.media-buttons {
width: 202px;
height: 202px;
background: #000;
-webkit-mask-position: 10px 10px;
}
.media-buttons:hover {background: rgb(94, 176, 201);}
HTML:
<img class="media-buttons" id="cross">
TL;DR, I am looking for a (possibly new) way to display my .svg icons that has somewhat decent browser support and the ability to manipulate the icon's color via CSS.
Here's one way:
svg:hover {
color: #009BCD;
}
p {
color: green;
}
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" display="none">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" fill="currentColor" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<p>
Heh! What's this
<svg width="1em" height="1em" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
doing in the middle of a sentence?
</p>
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
What I did here was:
Copy the SVG into the HTML (and removed the XML preamble)
Set display="none" on the <svg> so that it is invisible on the page.
Changed the fill on the icons <path> element to currentColor
Now every time you want a copy of the icon to appear, create a mini-svg that reverences the <path> in the first SVG.
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
Just set it's size with the width and height values. You just need to include each icon once and you can reference them as many times as you like.
What is currentColor for?
currentColor is a special color value in SVGs that tells the elements to use the value of the current color setting. It means you can set the color outside the <use> element and it gets inherited by whatever the <use> is referencing. Normally you can't style each of the icon references individually. They would all be stuck having whatever fill the original <path> is set to.
Using just the original SVG
svg path {
fill: blue;
}
svg:hover path {
fill: #009BCD;
}
<p>SVG just used as is</p>
<svg width="100px" height="100px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" sketch:type="MSShapeGroup"></path>
</g>
</svg>
I can't tell for sure where this bug is coming from but I think it has something to do with borders. Add a 1px border and you'll see some really weird behaviour. Now to answer your question: To make sure your image doesn't get clipped you can use mask-size. E.g. -webkit-mask-size: 50% 50%;
Just don't think masks are ready for primetime just yet.
Here's a pen that demonstrates this: http://codepen.io/anon/pen/ONLRbZ