Animation of the problem (theirs vs mine). More context below:
I have gotten some code off of JSFiddle and it is as follows:
HTML:
<article id="main">
<div class="ocean">
<div class="wave"></div>
</div>
</article>
CSS:
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
width: 6400px;
top:-198px;
height:198px;
animation: wave 2s linear infinite;
}
#keyframes wave {
100% {
margin-left: -1600px;
}
}
article{
width:100%;
height:100vh;
}
Now with me, I have the exact same code, but I changed out the source to an svg that I made by changing the 'background' attribute in the '.wave' class as follows:
background: url("...\my_svg.svg");
Then this is the code for that SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 65">
<defs>
<style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
</defs>
<title>bkg-side</title>
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
</g>
</svg>
Now as you'll see, there is a smooth transition for the svg that I am using and a not-so-smooth transition with the SVG that I made. Theirs will scroll infinitely to the side or at least look like it is while mine will 'reset' after the set amount of time for the animation (in this case, 5 seconds). The only difference in code is which SVG is being used and I have no idea why their SVG will scroll to the side infinitely and look like a smooth curve, while with mine, it resets and gets choppy every 5 seconds. Does it have something to do with the SVG code in of itself?
EDIT: the ends DO touch each other forming a consistent curve with both images, and I have put my image in the top left corner of Illustrator and hit 'Export Selection...'. The consistancy is there, but with this one, the wave goes on without resetting while mine DOES reset from the beginning.
It's because your wave is in the middle of a large SVG, with space all around it. Whereas theirs occupies the full width of the SVG.
When you repeat-x theirs, the left and right edges of each repeat meet up. Yours have large gaps on the left and right.
You need to move your wave shape to the left edge of the SVG and trim the page size to match the width.
Based on Paul's comment, and by comparing the svg files, I found that THEIR svg didn't have a viewbox attribute and had a width attribute, while mine DID have a viewbox attribute and didn't have a width attribute. I set the with to be the value of the margin-left value in the #key-frames animation and presto!
My old svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 65">
<defs>
<style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
</defs>
<title>bkg-side</title>
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
</g>
</svg>
My new svg:
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="66">
<defs>
<style>.cls-1{stroke:#000;stroke-miterlimit:10;}</style>
</defs>
<title>bkg-side</title>
<g id="Layer_1" data-name="Layer 1">
<path class="cls-1" d="M1600.3,58.38c-64.8,0-177.4-9.65-400-28.94S866.52.5,800.4.5C735.6.5,623,10.15,400.45,29.44S66.62,58.38.5,58.38v6.89l1600,.23"/>
</g>
</svg>
I'm trying to use an SVG symbol in my mark-up, but I can't get the CSS to increase the size of the symbol being rendered inside a element?
I have a twitter logo defined in a set of tags, and then I'm referencing this with an xlink:href inside use tags. The icon is showing, but when I add CSS to the #box1 div holding the element the symbol isn't increasing or decreasing in size and seems to only rendering at the viewBox size.
Also, the SVG element itself when I hover it with the dev tools is rendering at 300 x 150px - but there is nothing on in the code with these measurements.
I'm really confused — any help would be awesome.
#box1 {
height: 10rem;
width: 10rem;
}
<defs style="display: none;">
<svg id="twitter" viewBox="0 0 19.19 15.95">
<symbol id="twitter-symbol"><title>twitter</title>
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
</path>
</symbol>
</svg>
</defs>
<div id="box1">
<svg>
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
The <defs>is an svg element. It always goes inside the svg. I've made a few changes and now it works. Please run the code and take a look at what I've done.
#box1 {
height: 10rem;
width: 10rem;
}
#twitter{display:none;}
<svg id="twitter">
<defs>
<symbol id="twitter-symbol"><title>twitter</title>
<path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
</path>
</symbol>
</defs>
</svg>
<div id="box1">
<svg viewBox="0 0 19.19 15.95" width="24">
<use xlink:href="#twitter-symbol"/>
</svg>
</div>
I hope it helps.
You're using inline SVG code within your HTML, so I believe that SVG path needs a viewbox defined within it. For example, if you add viewBox="0 0 60 55" within your HTML SVG tag, you'll notice that the size will start to adjust. So edit this part of your HTML
<svg viewBox="0 0 60 55">
<use xlink:href="#twitter-symbol"/>
</svg>
To expand on your note where you found the size listed as 300x150, this is the default standard size that applies to HTML inline SVG code (per HTML5 specs). This differs sometimes depending on the browser.
Keep in mind, there a are a few different methods you can use when handling SVGs. Check out the guide below where they give a nice run down on SVG and how to manipulate it's size. You might find an alternative way that you would prefer to use.
https://css-tricks.com/scale-svg/
I am trying to create a simple directional pad and I am running into a problem when trying to use flexbox to separate the left and right buttons. The button components themselves are SVGs. Using display: flex introduces a white space on the top and bottom of the SVGs that I do not want. Strangely, if I make them divs, the problem does not exist. This only happens on Chrome, it works on Firefox.
Here is the problematic code: https://jsfiddle.net/j1etr0ph/
Here is the solution I'd like, but with the SVG: https://jsfiddle.net/j1etr0ph/1/
Even more strange, it seems to work below in Stack Overflow's code sandbox.
#container {
border: 1px solid black;
display: flex;
justify-content: space-between;
}
#directional {
width: 33.3%
}
<div id="container">
<svg id="directional" viewBox="0 0 30 30">
<g id="circle">
<path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
<path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
</g>
<polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 "/>
</svg>
<svg id="directional" viewBox="0 0 30 30">
<g id="circle">
<path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
<path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
</g>
<polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 "/>
</svg>
</div>
Does anyone know what is causing this and how I can get rid of it?
EDIT: So it seems to not be totally reproducible.
* On Windows, the problem does not exist in Firefox. In Chrome, it ONLY exists on my local site, not the JSFiddle or SO code.
* On Mac, I have not tested Firefox yet. In Chrome, it exists on my local site AND JSFiddle, but not SO.
EDIT: Paul's solution was correct, adding height: 100% to the SVGs solved the problem. Since it only seems to be happening on my local site(still curious as to why), here is the screenshot with and without the height property:
With height: 100%: https://i.stack.imgur.com/gResy.png
Without: https://i.stack.imgur.com/whnxU.png
Try adding height: 100% to your SVGs.
#directional {
width: 33.3%;
height: 100%;
}
https://jsfiddle.net/j1etr0ph/2/
Here is a thing.
I have a 700x700px image that i would need to mask with SVG.
For Chrome and Safari i did that by using -webkit-mask-box-image with external SVG and it works properly.
For Firefox, i used clip-path property, and again, it functions properly.
The responsive part is problem.On Chrome&Safari, that part is working nicely, but on Firefox only the main image is resized, mask stays the same.
I am a complete newbie at this and i tried tons of solutions that i found online and i really couldn’t make it work.
<style>
body {
background: yellow;
}
.img-mask {
-webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
mask-border: url('http://imgh.us/mask_3.svg');
clip-path: url(#mask);
}
</style>
<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">
enter code here
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
<clipPath id="mask">
<path d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
</clipPath>
</svg>
Any help would really really be gratefully appreciated!
Fiddle can be found here https://jsfiddle.net/y7zaw4bz/1/
You need to use objectBoundingBox units (and make the path run from 0 to 1) e.g.
body {
background: yellow;
}
img {
width: 100%;
}
.img-mask {
-webkit-mask-box-image: url('http://imgh.us/mask_3.svg');
mask-border: url('http://imgh.us/mask_3.svg');
clip-path: url(#mask);
}
<img src="http://gto-live.com/wp-content/uploads/2015/04/charm-elegance-colorful-sofa-living-room-decor-718x718.jpg" class="img-mask">
<svg preserveAspectRatio="xMidYMid" width="700" height="700" viewBox="0 0 700 700">
<clipPath id="mask" clipPathUnits="objectBoundingBox">
<path transform="scale(0.0014)" d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
</clipPath>
</svg>
Here I've scaled the path to correct the units 0.0014 is roughly 1 / 700