Related
I want my SVG to have motion when scrolling.
<header>
<svg class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#888" fill-opacity="1" d="M0,32L60,53.3C120,75,240,117,360,160C480,203,600,245,720,218.7C840,192,960,96,1080,74.7C1200,53,1320,107,1380,133.3L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
<h1>GOMI</h1>
<svg class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#888" fill-opacity="1" d="M0,32L60,53.3C120,75,240,117,360,160C480,203,600,245,720,218.7C840,192,960,96,1080,74.7C1200,53,1320,107,1380,133.3L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
</header>
So basically, im trying to make a wave transition between background colours and I put in this svg and it works fine but when I resize to big/full screen screens (desktop) the svg element doesn't stretch to the full width possible , my code:
<div class="waves" style="height: 244px;width: 100%;overflow-x: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="display:block;height:100%;">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
style="height:100%;width:100%;display:block;"></path>
</svg>
</div>
If I set the width to 100% on the svg element it just centers the path image
How about this. I've
Added a width:100% to the SVG element's stle.
Added preserveAspectRatio="none" so the SVG adapts to the viewport.
<div class="waves" style="height: 244px;width: 100%;overflow-x: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" style="display:block;height:100%;width:100%;">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"></path>
</svg>
</div>
Is that what you need?
<div class="waves" style="height: 244px;overflow: hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#36393D" fill-opacity="1" d="M0,192L18.5,202.7C36.9,213,74,235,111,202.7C147.7,171,185,85,222,74.7C258.5,64,295,128,332,176C369.2,224,406,256,443,234.7C480,213,517,139,554,128C590.8,117,628,171,665,181.3C701.5,192,738,160,775,128C812.3,96,849,64,886,85.3C923.1,107,960,181,997,186.7C1033.8,192,1071,128,1108,85.3C1144.6,43,1182,21,1218,64C1255.4,107,1292,213,1329,250.7C1366.2,288,1403,256,1422,240L1440,224L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
></path>
</svg>
</div>
I how do I remove the extra whitespace in this svg? When I inspect the blue curve is is the path and the highlighted blue is the entire svg. I don't understand I tried adjusting the view box and a couple different properties it didn't work?
The .grey-curve-svg is just an empty div with no styles.
Here is the svg:
<div class="grey-curve-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0099ff"
fill-opacity="1"
style="--darkreader-inline-fill:#007acc;"
data-darkreader-inline-fill=""
d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
></path>
</svg>
</div>
The viewBox determines the visible dimensions in the SVG.
Yours is 0 0 1440 320 (min-x, min-y, width and height). You can alter it to crop the contents of the svg. Something like viewBox="0 230 1440 100" looks like it fits better
<div class="grey-curve-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 100">
<path fill="#0099ff"
fill-opacity="1"
style="--darkreader-inline-fill:#007acc;"
data-darkreader-inline-fill=""
d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
></path>
</svg>
</div>
The viewBox area has a lot of blank space in it at the top. Adjusting the viewBox dimensions can fix that...
<div class="grey-curve-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 320">
<path fill="#0099ff"
fill-opacity="1"
style="--darkreader-inline-fill:#007acc;"
data-darkreader-inline-fill=""
d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
></path>
</svg>
</div>
Previous answers said to alter the viewBox, yet simply viewbox="0 0 1 1" worked for me as my child graphics superseded those dimensions.
I have an SVG element that is embedded into my HTML page that works perfectly on Firefox but does not work on Chrome.
I'm using a mask to cover a video background while the SVG element has a transparent fill (using CSS class on use element) to show video background through it.
I believe I identified the problem to be with the <use> tag because when I inspect it in Chrome, the use element has some dimensions but is not matching the SVG viewbox's size: <svg viewBox="0 0 1000 300" class="svg-inverted-mask"> that it lives in. In Firefox, the size of use element matches the viewbox and renders correctly.
Code:
<div class="wrap heightwrap wow fadeInDown" data-wow-delay="0.4s">
<svg viewBox="0 0 1000 300" class="svg-defs">
<!-- Symbol with Logo -->
<symbol id="s-text2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="30%" y="-25%" width="700" height="800" viewBox="0 0 1000 800">
<defs>
<rect id="a" x="50%" y="50%" width="612" height="792"/>
</defs>
<clipPath id="b">
<use href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" d="M468.896,118.65l-80.667,254.289H145.563l-24.334-62.667h188 c0,0,26.167,0.167,33.311-18.676l15.356-50.99c20.333-62.333,22.67-67.217-34-67.667c-15.121-0.12-30.689,0.122-39.254,0.072 c-17.878-0.105-22.246,0.139-20.368-10.094l10.712-34.979c0,0,1.285-9.287,17.66-9.287"/>
<path clip-path="url(#b)" d="M275.563,267.9c28.667,0,28.013-1.13,35.833-28.5c8-28,9.457-29.082-12-29.5 c-10.548-0.205-26.166,0-26.166,0c-51.959,0-64.834,1.5-58.222-24.03c2.682-10.354,6.587-25.693,12.221-45.637 c4.024-14.247,8.103-29.353,11.369-38.006C250.481,70.74,271.842,75.708,343.23,75.9c92.334,0.249,139.333,0,139.333,0l20.333-62 h-314l-41.553,149.031c0,0-2.537,10.65-6.408-0.212L87.896,13.9h-69l89.667,254H275.563"/>
</svg>
</symbol>
<!-- Mask with text -->
<mask id="m-text2" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
<rect width="100%" height="100%" class="mask__shape">
</rect>
<use href="#s-text2" class="mask__text"></use>
</mask>
</svg>
<div class="box-with-text">
<!-- Container for video -->
<div class="text-fill">
<video class="video" src="/css/fractal3.mp4" autoplay loop></video>
</div>
<!-- Visible SVG -->
<svg viewBox="0 0 1000 300" class="svg-inverted-mask">
<rect width="100%" height="100%" mask="url(#m-text2)" class="shape--fill" />
<use href="#s-text2" class="text--transparent"></use>
</svg>
</div>
</div>
Getting rid of the unnecessary clipPaths seems to help.
They look like the sort of clips that Illustrator adds to reproduce its way of rendering strokes. But since your symbol doesn't have an stroking, they are safe to remove.
<div class="wrap heightwrap wow fadeInDown" data-wow-delay="0.4s">
<svg viewBox="0 0 1000 300" class="svg-defs">
<!-- Symbol with Logo -->
<symbol id="s-text2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="30%" y="-25%" width="700" height="800" viewBox="0 0 1000 800">
<path d="M468.896,118.65l-80.667,254.289H145.563l-24.334-62.667h188 c0,0,26.167,0.167,33.311-18.676l15.356-50.99c20.333-62.333,22.67-67.217-34-67.667c-15.121-0.12-30.689,0.122-39.254,0.072 c-17.878-0.105-22.246,0.139-20.368-10.094l10.712-34.979c0,0,1.285-9.287,17.66-9.287"/>
<path d="M275.563,267.9c28.667,0,28.013-1.13,35.833-28.5c8-28,9.457-29.082-12-29.5 c-10.548-0.205-26.166,0-26.166,0c-51.959,0-64.834,1.5-58.222-24.03c2.682-10.354,6.587-25.693,12.221-45.637 c4.024-14.247,8.103-29.353,11.369-38.006C250.481,70.74,271.842,75.708,343.23,75.9c92.334,0.249,139.333,0,139.333,0l20.333-62 h-314l-41.553,149.031c0,0-2.537,10.65-6.408-0.212L87.896,13.9h-69l89.667,254H275.563"/>
</svg>
</symbol>
<!-- Mask with text -->
<mask id="m-text2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect width="100%" height="100%" class="mask__shape">
</rect>
<use href="#s-text2" class="mask__text"></use>
</mask>
</svg>
<div class="box-with-text">
<!-- Container for video -->
<div class="text-fill">
<video class="video" src="/css/fractal3.mp4" autoplay loop></video>
</div>
<!-- Visible SVG -->
<svg viewBox="0 0 1000 300" class="svg-inverted-mask">
<rect width="100%" height="100%" mask="url(#m-text2)" class="shape--fill" />
<use href="#s-text2" class="text--transparent"></use>
</svg>
</div>
</div>
I am working on a project where I have to apply 2 svg masks to a div. They are used to blend a large header image into the background on the right and left side.
The following is the HTML code I am using:
<div class="banner inner-slider">
<ul class="bx-slider">
<li class="mask" style="background-image: url('http://placehold.it/1440x610'); background-size: cover; background-position: center center;">
<div class="slide clearfix bigWrapper">
<div class="col-md-1"></div>
<div class="col-md-6 text-left">
<h1>Sample Header</h1>
<p>This is some sample header text. Wee! Isn't this fun?</p>
</div>
</div>
</li>
</ul>
</div>
My CSS is as follows:
.mask {
-webkit-mask-image: url('../images/mask-right.png'),url('../images/mask-left.png');
mask: url("../images/mask-right.svg"),url("../images/mask-left.svg");
-webkit-mask-size: 100% 100%;
-webkit-mask-position: center;
}
When I have this setup, neither mask is shown. If I break them out into individual classes (mask-left and mask-right) and assign both to the div, I get one or the other to show, but never both.
How do I get both masks to show?
I used this svg to great masking image with animation
Check the output here
<style type="text/css">.myClass { fill: url(#image); backenter link description hereground-size:contain;}svg{display:block;margin:0 auto;}</style>
<svg id="layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g id="Layer_2"><path id='triangle' class='myClass' fill="#151515" d="M38.668,249.994l-1.333,8.667c0,0-12.667,24.667-15,28S2.766,334.326,2.766,334.992
S-1.667,350.326,16,353.326s28,2.333,28,2.333s6.333,32.999,5.333,34.999s1,9.334,16,14.667c0,0-3.667,9.665-2,12.665
s13.333,12.999,18,13.333c0,0,8.667,3.334,3,8.667c0,0-14.333,32.664,13,45.997c0,0-7.333,9.998-16.333,11.665
c0,0-17.667,7.666-16.667,27.666c0,0-4.333,69.336,5,85.336c0,0,12.666,23.671,10.333,35.671c0,0,7,18.332,8.333,25.666
c0,0,2.667,30.671,6.667,37.671l9,42.337c0,0-17.667,31.669-19.667,40.002s155,0,155,0s-16.667-38.337-17.333-48.671
S209,715.994,209,715.994s-16-58.668-5-76.334s20.667-15.669,38-38.669c0,0,16.667-18.006,19.667-18.006c0,0,9-11.67,10.333-22.003
v-44.667c0,0,30.332,24.334,34,28.667c0,0-7,17.333-7.334,22c-0.332,4.667,3.335,7.333,4.668,7.333
c1.332,0-0.741,12.334,4.129,18.334c4.869,6,5.203,3.333,5.203,3.333s-6.332,12.334,3,33.667c0,0,2.335,7.669-1,10.335
c-3.334,2.666-2.334,17.334,2.334,23.334c0,0-10,26.338-11,36.338s-1.063,18.333,1.136,20s-7.47,15.675-6.802,19.008
c0.666,3.333-6.334,15.334-6.667,20S285,792,285,792l327.159-0.096L612,365.5c0,0-46.5-20.5-83.5-28c0,0-53-15-64-22
c0,0-25.5-27-27-33s20-30,0-73.5c0,0,1-28.5-7.5-37c0,0-1-49-25-82.5s-42-67.499-99-90.833L188.667,0c0,0-35,6.667-47.333,19.001
c0,0-25.667,8.333-39,13c0,0-38.667,14.667-45.333,15c0,0-60,20.333-32,63c0,0,5.333,11.667,25.667,19c0,0-12,27.997-13.667,39.664
s-9.333,42.333-9.333,44.333s1,17.996,2.333,19.329"/>
</svg>
<svg>
<defs>
<pattern patternContentUnits="objectBoundingBox" id='image' width="3.4" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image patternContentUnits="objectBoundingBox" xlink:href='img/loop.jpg' width="100" height="100" preserveAspectRatio="none">
<animate attributeType="XML"
attributeName="x"
from="-60" to=".2"
dur="100s"
repeatCount="50"/>
</image>
</pattern>
</defs>
</svg>
[This is how it looks][1]