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 attempting create a SVG that expands with the amount of text I enter into it. I have three bars that I'm attempting to wrap with an outline, but the bars aren't melding into the outline, I'm getting a raised edge:
I have create a fiddle with my SVG code, please let me know how I can smooth those borders out. Also, if anyone has a better idea to how to create a SVG button that scales with text, please don't hesitate to let me know!
body { background-color: #13171a; }
g{
/*g element expands with text child element, so we'll apply the outline here */
outline: 1px solid #ffdb00;
}
g text { fill: #fff }
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 744 1052"
height="297mm"
width="210mm">
<g
id="layer1">
<path
id="path4150"
d="m 70,77 0,45"
style="fill:none;fill-rule:evenodd;stroke:#ffdb00;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path4152"
d="m 85,77 0,45"
style="fill:none;fill-rule:evenodd;stroke:#ffdb00;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;" />
<path
id="path4150-6"
d="m 58,77 0,45"
style="fill:none;fill-rule:evenodd;stroke:#ffdb00;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" />
<text
id="text4169"
y="113.27509"
x="101.77287"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="113.27509"
x="101.77287"
id="tspan4171">TEST TEXT</tspan></text>
</g>
</svg>
When one write this SVG code, with embedded CSS:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">
<style>
defs rect
{
fill: blue;
}
</style>
<defs>
<rect id="rectangle" x="5" y="10" width="3" height="3"/>
</defs>
<rect x="5" y="5" width="3" height="3"/>
<use xlink:href="#rectangle"/>
</svg>
Then, Chrome does apply the "fill:blue" rule to the second rect through the use tag (so first rect is black, second is blue), whereas firefox does not apply the rule (both rects remain black).
Is that a firebug? Is there something I don't get? Or does the standard say "defs tag should block CSS selectors"?
It's actually a bug from Firefox.
Rules apply to the defs rect elements, but they don't apply when the use tag clones the defs rect.
Replacing the defs with a g tag shows that the defs rect is filled; but the rules are not applied to the "-generated clone".
Correct behavior is Chrome's one, filling the use-generated clone; use-cloned version of the defs rect is wrongly not filled by firefox.
See https://bugzilla.mozilla.org/show_bug.cgi?id=997362#c4 for more explanations.
I have an SVG set as a background image for a link. When you hover over the link the SVG is displayed and the animation is played once and then stops. This works great, except when you hover over the link a second time (or any other link with the SVG background), the animation doesn't start over.
Is there a way (other than setting the animation to loop) to get the SVG to start again on each hover? This is the code for the SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="All_glyphs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="20px" viewBox="0 0 10 20" xml:space="preserve">
<rect x="0" y="20" width="10" height="20" fill="#7fffe5">
<animate attributeName="y" from="20" to="0" dur="500ms" fill="freeze" repeatCount="0"/>
</rect>
</svg>
And the CSS I use:
a:hover {
background-image: url(link.svg);
}
In the end I used background-position and CSS transitions to animate the background.
Is there a way in SVG to draw a line that keeps thin when the image is stretched?
I'm using a SVG image as a CSS background, something like this:
<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
<line x1="0" y1="15" x2="15" y2="0"
color="#000" stroke="#333" stroke-width="1" />
</svg>
(A diagonal line). I'm stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line.
Possible? Something like "thin" lines in flash.
In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.
<!-- via property -->
<line … vector-effect="non-scaling-stroke" />
<!-- via CSS -->
<style>
line { vector-effect:non-scaling-stroke }
</style>
<line … />