Here I give code of html which not work properly, how can I get it to move smoothly?
I am happy to use jQuery if necessary.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z;
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3
c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>
An animation with easing between two path definitions can only work if they match structurally.
They must have the same number of control points and all path commands must be identical.
You cannot exchange absolute (C) commands for relative (c), or shorthand curve commands (S) for full (C).
Optional command letters (for repetitions of the same command) can be used or left out.
Whitespace can have different length or be exchanged for commas.
The reason for that is actually not that hard to understand: To compute an interim state, the renderer needs to formulate a path definition by choosing an appropriate value between the "from" and "to", for every control point. There can be no computed interim if the letters or the number of points differ.
Currently you go from
M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z
to a much longer command
M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3 c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20 C1361.9,89.3,1361.8,44.6,1361.7-0.1z
That is much too different.
And there is a fair amount of work involved to get them to match. I don't know if Illustrator will be helpfull in that regard. It changes commands for what it deems optimal and if that happens in one command variant and not the other, easing will still not work. The only thing you can rely on is writing down the path commands in a text editor one below the other and comparing number for number, letter for letter.
The version below was worked out with Inkscape, some experience, and a lot of trial and error.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
<g id="Shape_1">
<g>
<path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
<animate attributeName="d" attributeType="XML" repeatCount="indefinite"
values="M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 82,218.1 140.1,213.6 222.9,206.8 289.6,201.3 372.4,194.3 462.7,186.6 509.1,182.6 557.4,178.5 606.6,174.3 697.4,166.4 790.9,158.3 879.9,150.6 962.2,143.4 1040.7,136.6 1109.4,130.6 1193.6,123.2 1277.8,115.8 1362,108.4 Z;
M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 135.7,217.9 174.2,190.6 226,177 313.3,154.1 329,198.9 464,191 528.4,187.2 519.7,177.4 607,166 736.3,149.2 761.8,170 880,159 998.6,148 1005.3,124 1110,114 1217.5,103.8 1306.2,119.9 1362,134 Z;" begin="0s" dur="5s"/>
</path>
</g>
</g>
</svg>
I have a set of SVG paths which make up a logo.
Then, I want to have several images (to appear as the SVG) which slide through gradually. My problem is that I cannot make them work as the background, in other words, I want the SVG to mask the image(s).
I have a SVG like this:
<svg class="polygon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="225.533px" height="261.262px" viewBox="0 0 225.533 261.262" style="enable-background:new 0 0 225.533 261.262;" xml:space="preserve">
<g id="svg-draw">
<path data-name="nav-projects" data-href="<?php print JUri::base() ?>projects" data-ajax="true" class=" st4 hover-logo" d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831c-2.804,23.373,2.034,40.255,27.625,37.926c6.952-0.97,15.662-4.346,24.417-9.214"></path>
</g>
<image clip-path="url(#svg-draw)" height="100%" width="100%" xlink:href="<?php print THEME_URL."/img/rev1.jpg"; ?>" />
</svg>
And if you notice, I have put the image tag right inside the SVG. But nothing happens. I also have removed most of the Paths of the svg in the above example, because they are too long to be copied here.
I used the clip-path property of the image, but to no avail.
You can't just clip with any element. You have to define a <clipPath> and clip with that.
<svg class="polygon" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="225.533px" height="261.262px"
viewBox="0 0 225.533 261.262">
<defs>
<clipPath id="svg-draw">
<path d="M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831
c-2.804,23.373,2.034,40.255,27.625,37.926
c6.952-0.97,15.662-4.346,24.417-9.214"></path>
</clipPath>
</defs>
<image clip-path="url(#svg-draw)" height="100%" width="100%"
xlink:href="http://placekitten.com/200/300" />
</svg>
Depending on the effect you wish to achieve, this CSS Tricks article should provide you with the right guidance https://css-tricks.com/clipping-masking-css/
Here's a storyboard of the CSS/JS/SVG animation I'm trying to accomplish. Two triangle masks enter from either side, then intersect resulting in a negative mask:
The point where the triangles intersect is where it gets tricky. When I export the mask for panel 4 to SVG, it looks like this:
<svg width="416px" height="289px" viewBox="0 0 416 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M211.503681,65.6626347 L507.009604,-138.787586 L507.009604,425.787586 L211.507182,221.339788 L-84,425.792431 L-84,-138.787586 L211.503681,65.6626347 Z M211.503681,65.6626347 L99,143.5 L211.507182,221.339788 L324.01001,143.502422 L211.503681,65.6626347 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-1-Copy-3" fill="#F6A623" x="0" y="0" width="416" height="289"></rect>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Combined-Shape" fill="#000000" xlink:href="#path-1"></use>
<rect id="Rectangle-1-Copy-2" fill="#4990E2" mask="url(#mask-2)" x="0" y="0" width="416" height="289"></rect>
</g>
</svg>
It looks like it's basically drawing two shapes, the negative-space diamond mask in the center and the remainder of the outer triangles.
So the static mask itself appears to be possible with SVG, but I don't know how to animate it. Is there a library that can simplify this kind of SVG transition/tweening, or a fancy math equation that can calculate the paths dynamically?
Or am I looking at this the wrong way entirely and there's a much easier way to do it altogether?
So the solution was to make it both more simple AND more complicated.
Instead of two layers on top of each other with one mask, I needed three layers. One on the bottom to show behind the first mask, the second to be masked by the incoming triangles, and a third layer above that, duplicate to the first, where a diamond-shaped mask is applied.
<svg width="500" height="300" viewbox="0 0 500 300">
<defs>
<clipPath id="triangles">
<path id="left" d="M-250,-150 L250,150 L-250,450 Z" fill="black" />
<path id="right" d="M250,150 L750,-150 L750,450 Z" fill="black" />
</clipPath>
<clipPath id="diamond">
<path id="diamond-path" d="M250,0 L500,150 L250,300 L0,150 Z" fill="black" />
</clipPath>
</defs>
<!-- bottom -->
<g id="bottom">
<rect fill="darkorange" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
<!-- middle/triangles -->
<g id="middle" clip-path="url(#triangles)">
<rect fill="dodgerblue" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
<!-- top/diamond -->
<g id="top" clip-path="url(#diamond)">
<rect fill="darkorange" x="0" y="0" width="500" height="300" />
<text x="50%" y="65%" text-anchor="middle" class="text">Text</text>
</g>
</svg>
The top layer with the diamond path starts out scaled to 0, making it invisible. The two triangle clip paths are animated in towards each other, showing the bottom layer underneath. When the two triangle points meet, the diamond clip path on the top layer is scaled up, revealing the top layer which is a duplicate of the bottom.
I also switched to clip paths instead of masks because they're a) better supported and b) allow for multiple paths.
Here's a Codepen using CSS for the animations (only works in WebKit for the moment).
UPDATE: Here's a Codepen using GSAP that works in all browsers: http://s.codepen.io/kgrote/debug/mPxzZY
I got this little SVG grid
<svg id="grid-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#000000" stroke-width="0.7" />
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)" />
</pattern>
</defs>
<rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
</svg>
I got it in a template html. Because I don't want it to remain in the main page for a reason.
Then I just clone that piece of SVG, create a wrapper div, and append the grid-svg to it.
Then I apply the grid dynamically with jQuery.
It works for Chrome and Firefox, but it doesn't work for IE 10 and IE 11.
Do you know why?
Thanks.
I am using the SVG using D3.js and i had the same issue.
I wrote the below code to resolve the issue
$('#lineChartSVG g').remove();
$('#lineChartSVG path').remove();
here i am removing the previous g and path, replacing with the new one.
Keep your tags in the static content and then call the above code where you used your code. This should work
This was solved already, i was doing a jquery clone() to get it from the template, which is wrong. Now it works fine.