SVG 100% Width Height Round Caps - svg
I want to have my SVG, that is 100% width and height, with round caps.
Now they are kinda stretched.
html,
body {
width: 100%;
height: 100%;
margin: 0;
background-color: cadetblue
}
.st0 {
fill: none;
stroke: green;
stroke-width: 20px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M15 15 L85 15 L85 85 L15 85 L15 50 L50 50 " class="st0"/>
</svg>
Thanks for helping me out!
Ok, found it myself:
Just added
vector-effect="non-scaling-stroke"
Into the SVG
Related
HTML to PDF with inline SVG by using Laravel
I have an HTML that contains inline SVG data. I want to convert that HTML file into the PDF file. I have tried 2 packages TCPDF and DOMPDF to convert HTML into PDF. These packages are not displaying SVG content in the converted PDF files.Here is my HTML content <div style="position: relative;"><img src="https://cdn.shopify.com/s/files/1/1659/7869/products/TEAM-TAKEDOWN-STREAMLINE-WHITE.jpg" style="width: 600px; height: auto;"><div style="position: absolute; top: 216px; left: 194px;width: 225px;height: 330px;overflow: hidden;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="225" height="330" viewBox="0 0 225 330" xml:space="preserve"> <defs> </defs> <g transform="matrix(0.5 0 0 0.5 112.5 165)" > <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://cdn.shopify.com/s/assets/no-image-100-c91dd4bdb56513f2cbf4fc15436ca35e9d4ecd014546c8d421b1aece861dfecf_small.gif" x="-50" y="-50" width="100" height="100"></image> </g> <g transform="matrix(0.5 0 0 0.5 112.5 165)" > <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1597153275_Asset%201%20copy%202.png" x="-215.5" y="-244.5" width="431" height="489"></image> </g> <g transform="matrix(0.5 0 0 0.5 112.5 165)" > <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" xlink:href="https://accessibilityplus.ca/storage/images/1595491407_1592358037_design.png" x="-200" y="-200" width="400" height="400"></image> </g> </svg></div></div> Here is my current output: http://prntscr.com/u5jcc3. Here is the expected output: http://prntscr.com/u5jd4s.
SVG Animated Graph Arrow
This is my first time using SVG and I want to know if it is possible to create an animated line graph with an arrow. I have found multiple examples of animated line graphs without arrows, non-animated line graphs with arrows, and animated straight lines with arrows, but not exactly what I am looking for. I have attached some codepen examples I've been playing around with below. Does anyone know if this is possible/have a solution? It would be greatly appreciated!
Animated line missing arrow (needs arrow):
http://codepen.io/alexandraleigh/pen/jVaObd
# HTML
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
</g>
</svg>
</div>
# CSS(Less)
#import "lesshat";
#darkgrey: #303030;
*{
box-sizing: border-box;
}
body{
background: #darkgrey;
}
.graph__wrapper{
width: 400px;
margin: 30px auto;
position: relative;
svg{
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description{
font-family: "Roboto";
color:lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
Animated straight line with arrow (needs to stop at multiple points on path):
http://codepen.io/alexandraleigh/pen/yVPYrY
I tried adding the path descriptions from #1 to #2 and it has the desired final graph, just no animations:
http://codepen.io/alexandraleigh/pen/pNdgWR
I also tried adding the arrow marker from #2 to #1, but the arrow doesn't animate:
http://codepen.io/alexandraleigh/pen/aBVdVY
I'm also open to using a plugin such as http://snapsvg.io/, but haven't seen any working examples that help my situation.
you can do this with offset-motion(old syntax: motion-path).
Be aware that this is a heighly experimental feature. it currently only works in Chrome. More to the point i use the "old" syntax here as that is what currently works in chrome, but it will soon switch to the new systax...
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes pm {
from {
motion-offset: 0%;
}
to {
motion-offset: 100%
}
}
#arrow {
animation: pm 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844');
motion-rotation: auto;
motion-anchor: center;
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" />
</g>
</svg>
</div>
you can also do this with animateMotion, but svg animations are soon to be depricted. You will have to rewrite your code in any way sooner or later :-(
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s linear forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white">
<animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze">
<mpath xlink:href="#Path-1" />
</animateMotion>
</polyline>
</g>
</svg>
</div>
svg stroke-dashoffset animation not working in safari or firefox
This animation of an svg works fine in chrome but not safari and firefox. I have this css:
#one{
fill:#97e8da;
stroke: $green;
}
#two{
fill: #46ceb4;
stroke: $green;
}
#one,#two{
stroke-width: 0;
-webkit-animation:load 3s linear;
animation:load 3s linear;
}
#-webkit-keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}#keyframes load {
0% {
stroke-width: 7pt;
stroke: #46ceb4;
stroke-dashoffset: 1300;
fill-opacity: 0;
}
20%{
fill-opacity: .3;
stroke-width: 2pt;
stroke: #fff;
}
50%{
stroke-width: 1pt;
}
90%{
stroke-width: 0;
stroke-dashoffset: 500;
}
100%{
stroke-dashoffset:0;
fill-opacity: 1;
}
}
And my inline svg looks like this:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="130px" height="113px" viewBox="-10.062 -10.34 130 113" enable-background="new -10.062 -10.34 130 113" xml:space="preserve">
<path id="one" stroke-dasharray="1200 1000" d="M120,81.456L39.094 81.456 50.188 64.799 88.688 64.799 46.472 -10.184 66.943 -10.184 109.18 62.635 z"/>
<path id="two" stroke-dasharray="1200 1000" d="M0.011,101.998L-10 83.913 44.068 -8.737 84.229 62.414 63.607 62.414 43.62 27.393 z"/>
</svg>
In safari I can see the dash animation occurring but the path has no colour, it just clips the shape. In both cases the fill opacity does work
What's the $ doing before green? Fixing this makes it work in Firefox for me.
#one{
fill:#97e8da;
stroke: green;
}
#two{
fill: #46ceb4;
stroke: green;
}
I'm not exactly sure what your goal is, but I have it working the same on Firefox, Safari and Chrome. http://codepen.io/Bushwazi/pen/jqgaZO I pulled the stroke-dasharray out of inline and put it into the CSS, along with stroke-dashoffset I used AutoPrefixer for the prefixes, because it's smarter than us. This could be where your's is failing, but honestly I'm guessing. I log the getTotalLength value to get the actual number to use in the array and offset. The animation loops in the pen, but just so you can watch it.
SVG not working in Chrome
This works in Firefox but not Chrome. Basically the animation works correctly in Firefox with the lightbulb glowing and the leaf growing but for some reason cannot get it to work in Chrome. Thanks for the help here.
jsfiddle here, http://jsfiddle.net/EfLtD/1/
<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"
viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g id="light-bulb-6-icon_1_">
<path fill="#FFFFFF" d="M-314.3,152.1c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H-314.3z M-326.6,137.7c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H-326.6z M-327.4,123.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L-327.4,123.9L-327.4,123.9z M-298,109.7c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1c-25.5,0-37,18.2-37,35.1c0,12.1,5.6,21.4,11.5,31.3
c5.9,9.9,12,20.1,12.6,33.7h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2
c8.4-7.2,19.7-11.1,31.9-11.1c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5
c-5.6,9.4-10.8,18.2-11.2,28.5L-298,109.7L-298,109.7z M-312.8,109.6c-3.3-14.5-1.4-40.1,6.7-54.6l2.4-4.3l-3.9,3.1
c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7c-1.9,5.3-1.3,10.1-0.7,14.7
c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8L-312.8,109.6L-312.8,109.6z"/>
<path fill="#225650" d="M-311,1.4c11.9,0,23,3.9,31.2,10.9c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36
c-5.5,9.2-10.6,17.9-11.3,28h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1
c-6.9-5.8-16.2-9-26.1-9c-9.9,0-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1
h-7.1c-0.6-10.1-5.8-18.8-11.3-28c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5C-334,5.2-322.9,1.4-311,1.4L-311,1.4
M-295.4,35.5c-1.2,1.6-2.2,3.4-2.9,5.4c-1.9,5.5-1.3,10.4-0.8,15.2c0.5,4.5,1.1,8.7-0.7,13.1c-1.8,4.5-5.6,7.3-10.4,7.8l-1.6,0.2
l-0.2,1.6c-1,9.4,0.2,21.7,2.7,29.9h-2.7c-3-14.4-1.1-39.1,6.8-53.1l4.9-8.7l-7.8,6.1c-5.1,4-9.6,13.2-11.6,21
c-4.1-3.7-5.5-9.6-3.7-16.2c1.6-5.9,5.5-11.4,11-15.4C-307.7,38.6-301.8,36.3-295.4,35.5 M-294.7,118.7c0.6,0,1.2,0.2,1.6,0.7
c0.2,0.3,0.5,0.7,0.5,1.4l0,0v0c0,1.1-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1c0-1.1,1-2.1,2.1-2.1L-294.7,118.7 M-295.4,132.5
c1.2,0,2.1,0.9,2.1,2.1c0,1.1-1,2.1-2.1,2.1h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1H-295.4 M-300.9,146.1
c-0.2,0.2-0.3,0.3-0.5,0.5c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3H-300.9 M-311-0.6
c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66c0-22.8,18-34.1,36-34.1S-275,22-275,44.7
c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C-263.8,14.5-287.4-0.6-311-0.6L-311-0.6z M-289.6,33.1
c-33.2,0-46.5,33.8-28.9,44.2c1.5-8.4,6.5-18.9,11.5-22.8c-8.3,14.8-10.3,41.2-6.6,56.1h7.1c-3.1-8-4.5-21.8-3.5-31.7
c5-0.5,9.8-3.4,12.1-9c3.9-9.7-2.1-18.1,1.5-28.4C-295.1,37.7-292.7,34.9-289.6,33.1L-289.6,33.1z M-294.7,116.7h-32.7
c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1C-290.5,118.5-292.4,116.7-294.7,116.7L-294.7,116.7z
M-295.4,130.5h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C-291.3,132.3-293.1,130.5-295.4,130.5L-295.4,130.5z M-295.7,144.1h-30.7c8.1,7.5,8.9,9,12.1,9h6.2
C-304.9,153.1-304.2,151.7-295.7,144.1L-295.7,144.1z"/>
</g>
<g>
<path fill="#F9E46E" class="yellow" d="M89.5,93.2c0,24.3,23.5,38,24.1,66h24c0-27.3,24-41.7,24-66C161.6,47.7,89.5,47.7,89.5,93.2z"/>
</g>
<g id="light-bulb-6-icon_37_">
<path fill="#FFFFFF" d="M122.2,200.9c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H122.2z M109.9,186.5c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H109.9z M109.1,172.7c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L109.1,172.7L109.1,172.7z M138.6,158.5c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1S88.4,76.6,88.4,93.5c0,12.1,5.6,21.4,11.5,31.3c5.9,9.9,12,20.1,12.6,33.7
h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2c8.4-7.2,19.7-11.1,31.9-11.1
c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5c-5.6,9.4-10.8,18.2-11.2,28.5L138.6,158.5
L138.6,158.5z"/>
<path fill="#225650" d="M122.3,201.9h6.2c3.2,0,3.9-1.4,12.4-9h-30.7C118.3,200.4,119,201.9,122.3,201.9z M135.2,195.3
c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3h20.5C135.5,195,135.3,195.2,135.2,195.3z"/>
<path fill="#225650"d="M141.1,179.3h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C145.2,181.1,143.4,179.3,141.1,179.3z M141.1,185.5h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1h31.2c1.2,0,2.1,0.9,2.1,2.1
C143.2,184.5,142.3,185.5,141.1,185.5z"/>
<path fill="#225650" d="M125.5,48.1c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66
c0-22.8,18-34.1,36.1-34.1s36,11.4,36,34.1c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C172.8,63.2,149.1,48.1,125.5,48.1z
M146.6,157.5h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1c-6.9-5.8-16.2-9-26.1-9
s-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1h-7.1c-0.6-10.1-5.8-18.8-11.3-28
c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5c8.2-7,19.3-10.9,31.2-10.9c11.9,0,23,3.9,31.2,10.9
c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36C152.4,138.6,147.2,147.3,146.6,157.5z"/>
<path fill="#225650" d="M141.8,165.5h-32.7c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1
C146,167.3,144.1,165.5,141.8,165.5z M143.9,169.5L143.9,169.5c0,1.2-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1
c0-1.1,1-2.1,2.1-2.1h32.7v0c0.6,0,1.2,0.2,1.6,0.7C143.7,168.4,144,168.8,143.9,169.5L143.9,169.5z"/>
</g>
<path fill="#FFFFFF" class="leaf" stroke="#225650" stroke-width="2" stroke-miterlimit="10" d="M121.8,158.6c-3.3-14.5-1.4-40.1,6.7-54.6
l2.4-4.3l-3.9,3.1c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7
c-1.9,5.3-1.3,10.1-0.7,14.7c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8
L121.8,158.6L121.8,158.6z"/>
</svg>
/* CSS */
/* Globe */
#yellow-globe {width: 300px; height: 300px; margin: 0 auto; text-align: center;}
#keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
.yellow {
fill: yellow;
animation-name: yellow;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.leaf {
stroke-dasharray: 242;
stroke-dashoffset: 242;
animation: dash 4s linear alternate;
animation-iteration-count: 1;
}
#keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}
You need to include the -webkit- prefix on animations (and transitions) for webkit browsers (like Chrome). Working demo You may also want to include the -ms- and -moz- prefixes so that you can reach older versions of FireFox and IE as well
Fabric.js - SVG export
Just another question about SVG export in Fabric.js, I have tried http://fabricjs.com/kitchensink/ and I added two images to the canvas, then I applied shadow filter to them. When I export it to image, looks nice, but when I export it to SVG, all images are not displayed. I used windows 7, Firefox 25, the filter is missing in SVG, it supposed to be located inside <defs>. So my question is what I should know when I am doing with SVG from Fabric.js, if it didn't support somewhere, how could I add my own export method to its object, as I will use clip (not displayed in SVG too), shadow, and all other filters. Thanks. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" xml:space="preserve"><desc>Created with Fabric.js 1.4.0</desc> <defs></defs> <g transform="translate(237.81 209.86) rotate(36) scale(0.16 0.16)"><image xlink:href="http://fabricjs.com/assets/pug.jpg" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_5);" transform="translate(-360 -540)" width="720" height="1080" preserveAspectRatio="none"></image></g> <g transform="translate(479.6 187.6) rotate(3) scale(0.8 0.8)"><image xlink:href="http://fabricjs.com/assets/logo.png" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;filter: url(#SVGID_4);" transform="translate(-137.5 -47.5)" width="275" height="95" preserveAspectRatio="none"></image></g> </svg>