How can I change one svg path ID element when hovering over another element - css

I assigned SVG path elements with an ID property and named them opacity-1n and opacity-1e. I want to hover the mouse over opacity-1n, then opacity-1e will appear.
<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
</g>
#opacity-1n:hover #opacity-1e {opacity: 1;}
#opacity-1e {opacity: 0;}
Also tried:
#opacity-1n:hover + #opacity-1e {opacity: 1;}
#opacity-1n:hover > #opacity-1e {opacity: 1;}
#opacity-1n:hover ~ #opacity-1e {opacity: 1;}


You just need to hide the second path-element.
#opacity-1n:hover + #opacity-1e {
opacity: 1;
}
#opacity-1e {
opacity: 0;
}
<svg>
<g id="Layer_1">
<path id="opacity-1n" d="M135.4 6.8v38.3h-1.9l-15.1-13.8-1.8-1.6-6.8-6.2-2-1.8v23.4h-7.7V6.7h1.9L119.1 22l1.9 1.7 6.7 5.9V6.8z" class="st0"/>
<path id="opacity-1e" d="M196.9 22.9h18.2v6.3h-18.2v9.1H219v6.8h-29.8V6.7H219v6.8h-22.1z" class="st0"/>
</g>
</svg>

Related

CSS :hover on SVG group area instead of rendered pixels, pointer-events: bounding-box not working cross browser. How to workaround

I'm working on some animated SVGs with CSS animations that triggers on hover.
I'm being able to have the SVG animate on hover the way I want to for Chrome but I'm facing a Firefox and Safari issue.
Apparently, the pointer-events property applied to groups <g></g> doesn't give same behavior on this browser than on the other modern ones, at least when trying to set the value to bounding-box.
I'm doing
g {
pointer-events: bounding-box;
}
but the hover only gets triggered when the actual <path> element is hovered, not the whole group <g> as I would need to.
Can I use doesn't say anything about this, it mentions svgs also have support for this property.
Below there's a sample code for you to see how one of my SVGs looks like.
On chrome hovering the main containing group area will trigger the hover animation, on Firefox the actual path (the icon lines in this case) needs to be hovered in order to that to happen.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style>
g {
pointer-events: bounding-box;
//not working on FF
}
#mobile:hover .flip {
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
I would like to find a workaround for this, since I want to make this animations work cross browser. I would like to eventually make it work for IE11 and Edge too.
Thanks,

So pointer-events: bounding-box seems to not be supported by most browsers.
I implemented the workaround #ccprog suggested on the comments section of my question.
I added a <rect fill="none"> element to svg, that is same dimensions than the SVG itself. I added a :hover selector for that element and sibling selector ~ to select its sibling group with the flip class inside.
See CSS:
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
I found out I had to add pointer-events: visible to the rect element so it would detect the :hover. I added visibility: visible as a requirement to pointer-events: visible to work.
Below the full new SVG code:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mobile-icon">
<style>
#mobile-hover {
visibility: visible;
pointer-events: visible;
}
#mobile-hover:hover ~ .group .flip {
-moz-transform-origin:55% 50%;
-webkit-transform-origin: 55% 50%;
transform-origin:55% 50%;
-webkit-animation: flip_left 1.6s forwards;
animation: flip_left 1.6s forwards;
}
#keyframes flip_left {
0% {transform: perspective(2000px) rotateY(90deg) skewY(-1deg)}
30% {transform:perspective(2000px) rotateY(-25deg) skewY(-0.8deg)}
50% {transform:perspective(2000px) rotateY(20deg) skewY(0.8deg)}
70% {transform:perspective(2000px) rotateY(-10deg) skewY(-0.8deg)}
100% {transform:perspective(2000px) rotateY(0deg)}
}
</style>
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Mobile solutions</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
<rect fill="none" width="40" height="40" id="mobile-hover">
</rect>
<g id="MS_HP_Usecase_Based_Page-Desktop-2A" transform="translate(-766.000000, -418.000000)" stroke="#00A0DF" stroke-width="1.25" class="group">
<g id="Asset-5" transform="translate(766.000000, 418.000000)">
<g class="flip">
<rect id="Rectangle-path" stroke-linecap="round" stroke-linejoin="round" x="12.35" y="7.41" width="15.32" height="25.33" rx="2.03"></rect>
<circle id="Oval" stroke-linecap="round" stroke-linejoin="round" cx="20.01" cy="28.72" r="1.58"></circle>
<path d="M18.43,10.72 L21.48,10.72" id="Shape" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<circle id="Oval" cx="19.67" cy="19.67" r="19.04"></circle>
</g>
</g>
</g>
</svg>
Works on Chrome, Safari and Firefox and I'm attempting to test IE11 and Edge next.
Many thanks,

animate and rotate a scaleable SVG object about the center

I'd like to animate my SVG by rotating it about it's center, however due to the different sizes of my SVG, the center point changes depending where it's used in my web page.
Here's my SVG:
<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
<title>spinning orange circle</title>
<style>
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
stroke: #ed770b;
transform-origin: 50% 50%;
animation: dash 1.4s ease-in-out infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
</style>
<animateTransform attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
Copy this onto your desktop and save it as an SVG and run it in your browser to see the issue.
Now this works in stackoverflow, but when it's on my page, or just on a page by itself, the spinner flies out of view. How can I get it to spin about its center? Say I use CSS later to scale it up to 50x50 pixels, or larger and how can I still have it rotate about the center?
Edit: if you change the animate transform to have these values:
<animateTransform attributeName="transform"
type="rotate"
from="0 14 14"
to="360 14 14"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
it will work, but once you scale the image larger than 28px * 28px, it will no longer work.

I'm not sure it will solve the entire problem, but this works when saving and opening the code as svg:
<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
<title>spinning orange circle</title>
<style>
g {
transform-origin: 50% 50% 0px;
}
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
stroke: #ed770b;
transform-origin: 50% 50%;
animation: dash 1.4s ease-in-out infinite;
}
#keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
</style>
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0"
to="360"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</g>
</svg>
I wrapped the entire content with a new <g> tag and I gave it transform-origin: 50% 50% 0px; in the css.

SVG and FIREFOX and transform origin, why not working?

I have this example svg where flower on coffee mug should spin with transform-origin center.
In other browsers it works like champ but in firefox rotates randomly.
Have anybody else have this problem? Is there any easy fixes or im in s**t? :D
Thanks for all the help guys :) !
<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="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666"
xml:space="preserve">
<style>
#coffeeFlower {
-webkit-animation-name: coffeeFlower-animation;
animation-name: coffeeFlower-animation;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
#keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
<g>
<g>
<g>
<g>
<path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827
c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123
C205.399,185.767,241.826,72.295,402.577,58.794z"/>
<path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262
c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271
C284.65,91.009,324.625,117.573,400.396,115.509"/>
<path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609
c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/>
<path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393
c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799
s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/>
<path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898
c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462
c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/>
<path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958
c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/>
</g>
<path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973
c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351
s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365
s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377
c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/>
<path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88
C440.746,252.962,436.484,220.091,411.361,236.933z"/>
</g>
<g>
<path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566
c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/>
<path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629
c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/>
<path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0
l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/>
</g>
<path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438
s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381
c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/>
</g>
<path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/>
<path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/>
</g>
</svg>
Example code here: https://codepen.io/mrmagnus/pen/jmOVPq

Firefox has the correct behaviour according to the spec. For SVG elements "transform-origin: center" means the centre of the SVG. Chrome has implemented an older version of the spec and is now technically wrong.
In the future, you'll be able to set the box used to calculate percentage (center = 50%) origin values, with the transform-box property.
Until then, if you want compatibility between browsers, you'll need to use absolute coordinates.
transform-origin: 421px 250px;
<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="696.667px" height="428.666px" viewBox="0 0 696.667 428.666" enable-background="new 0 0 696.667 428.666"
xml:space="preserve">
<style>
#coffeeFlower {
-webkit-animation-name: coffeeFlower-animation;
animation-name: coffeeFlower-animation;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 421px 250px;
-ms-transform-origin: 421px 250px;
transform-origin: 421px 250px;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
#keyframes coffeeFlower-animation {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
<g>
<g>
<g>
<g>
<path fill="#FF00CD" d="M402.577,58.794c135.259-11.36,221.089,81.12,232.3,157.827
c9.135,62.505-17.688,206.188-222.337,207.712c-204.65,1.523-207.344-171.682-207.243-205.123
C205.399,185.767,241.826,72.295,402.577,58.794z"/>
<path fill="#9B009B" d="M400.396,115.509c45.462-1.239,113.712-17.373,126.306-46.262
c12.594-28.891-57.617-51.955-128.93-50.012c-71.313,1.944-114.239,30.769-113.681,51.271
C284.65,91.009,324.625,117.573,400.396,115.509"/>
<path fill="#FF00CD" d="M394.548,3.81c11.438-1.887,25.438,1.115,26.92,12.675c1.482,11.56-11.712,13.737-16.993,14.609
c-8.362,1.38-19.837-0.618-24.626-8.452C373.64,12.485,386.072,5.208,394.548,3.81z"/>
<path fill="#FF00CD" d="M227.215,307.564c0,0-50.859-0.397-61.369-25.981s-4.278-58.761-19.869-74.393
c-15.591-15.633-22.577-10.09-23.638-16.306s8.574-12.723,17.439-14.749c8.866-2.025,25.924,1.971,33.274,9.799
s19.619,32.472,35.664,32.034c16.045-0.437,29.351,29.53,30.704,46.443S227.215,307.564,227.215,307.564z"/>
<path fill="#FF00CD" d="M600.25,149.313c0,0,38.16-7.285,68.258,16.873c30.097,24.158,30.396,67.861,11.344,88.898
c-12.95,14.299-49.288,24.537-49.288,24.537l0.859-33.922c0,0,26.791,1.053,30.665-20.462
c3.874-21.516-2.754-35.608-13.646-42.448s-30.479-5.414-30.479-5.414l-17.738-28.955"/>
<path fill="#9B009B" d="M141.682,180.544c-4.545,0.125-15.033,4.871-14.068,7.521s13.493,4.093,22.383,2.958
c8.89-1.134,14.141-4.846,9.611-7.398C155.078,181.071,147.922,180.374,141.682,180.544z"/>
</g>
<path id="coffeeFlower" fill="#CDFF31" d="M436.924,236.235c0,0,35.948-25.799,9.224-56.801c-18.286-21.213-37.782-3.01-41.195,19.973
c-3.413,22.982,1.027,37.672,1.027,37.672s-6.398-37.141-37.238-32.453s-51.193,48.327-26.609,61.121s50.694,5.351,50.694,5.351
s-36.616,17.155-30.538,42.571c6.079,25.416,40.803,15.045,48.435-1.32c7.633-16.365,7.633-16.365,7.633-16.365
s12.673,36.734,36.975,30.996c24.302-5.738,26.406-27.338,19.312-40.608s-30.296-24.757-30.296-24.757s43.457,13.627,60.36-8.377
c16.904-22.003-5.356-48.324-24.119-45.121C461.827,211.321,436.924,236.235,436.924,236.235z"/>
<path fill="#00FFFF" d="M411.361,236.933c0,0-17.852,11.93-10.048,26.528c7.803,14.598,25.147,8.739,32.29-0.88
C440.746,252.962,436.484,220.091,411.361,236.933z"/>
</g>
<g>
<path fill="#FF00CD" d="M13.559,335.13c0,0,12.598-5.814,45.546-6.783c32.948-0.97,65.896,3.876,72.68,13.566
c6.784,9.69-4.845,82.37-62.989,82.37S2.899,358.387,3.869,350.634C4.838,342.882,4.838,338.036,13.559,335.13z"/>
<path fill="#FF9B00" d="M13.559,343.851c-3.876,14.536,16.474,15.506,51.36,16.475s59.113-5.814,60.082-11.629
c0.969-5.814-27.025-9.889-41.67-10.66C64.919,337.067,15.325,337.229,13.559,343.851z"/>
<path fill="#FF00CD" d="M129.847,358.387c0,0,18.412,6.784,21.319,19.382s0,24.227-10.66,29.071c-10.66,4.846-31.01,0-31.01,0
l6.783-14.536c0,0,16.474,9.691,22.289,0c5.814-9.69-10.66-22.288-10.66-22.288L129.847,358.387z"/>
</g>
<path id="kohviJuga" fill="#FF9B00" d="M135.634,190.937c0,0,3.591,1.055,10.046,0.43c6.455-0.627,9.624-1.438,9.624-1.438
s-4.441-26.975-10.921-40.859c-13.567-29.071-49.422-27.133-60.082-2.906c-7.364,16.735-20.35,202.533-20.35,202.533h19.381
c0,0,6.228-180,13.567-192.844c7.752-13.566,31.01-17.442,35.855,10.66C134.433,176.251,135.634,190.937,135.634,190.937z"/>
</g>
<path fill="#FF9B00" d="M55.229,315.748c0,0-5.814-30.04-16.474-25.195S55.229,315.748,55.229,315.748z"/>
<path fill="#FF9B00" d="M91.084,322.532c0,0,0.969-10.66,6.784-9.691S91.084,322.532,91.084,322.532z"/>
</g>
</svg>

The problem is that Google Chrome has a bugguy interpretation of the CSS style transform-origin: center.
But you can get rid of it and have the same behaviour on both browsers using this technique :
<g transform="translate(411,250)">
<g id="coffeeFlower">
<path transform="translate(-420,-250)"
d="...your yellow flower..."/>
</g>
</g>
The rotation is always computed on (0,0), but you use the trick of the double translation.
You just have to fine tune the translations and it will work like a charm (as you say).
See it in action : https://jsfiddle.net/hvngvz3y/2/

Determine startpoint svg animation

I have exported an svg file from Illustrator.
Now I'm animating the line work. I know how to change the direction of animating but how (if) is it possible to determine the startpoint of the animation?
Here is an example:
#keyframes lines { 0% {fill: none;} 50% {fill: none; stroke-dashoffset: 0;} 100% {fill: none ;stroke-dashoffset: 0;} }
.nose_outer{ animation: lines 4s ease forwards; stroke-dasharray: 186.514; stroke-dashoffset: -186.514; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
<title>svg</title>
<g><!-- NOSE OUTER -->
<path class="nose_outer" d="M396.667,406.31A17.016,17.016,0,0,0,381,416.686a17.008,17.008,0,1,0,0,13.266,17.011,17.011,0,1,0,15.667-23.642Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>
</svg>
By using negative and positive values on the stroke-dashoffset it's possible to change the direction.
Do I have to change something in Illustrator before exporting to svg?

Svg rotation animation with css not working on ie or edge

I'm working on an animation of a spinner on a svg.
Unfortunately, I'm having trouble with ie or edge. Every other browser are supported.
Here is the codepen: http://codepen.io/skjnldsv/pen/oxyjoQ
As you can see the opacity animation works, but not the rotate.
Is there some kind of prefix i'm missing, or is the svg support broken in ie/edge?
Thanks
here is the two svg, first one not working, second one is ok.
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50">
<style>
.spinner {
transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
animation: loading-spin .8s infinite linear;
-webkit-animation: loading-spin .8s infinite linear
}
#-webkit-keyframes loading-spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes loading-spin {
100% { transform: rotate(360deg); }
}
</style>
<defs>
<clipPath id="a">
<path d="M0 0h25v25H0z" />
</clipPath>
</defs>
<g fill="none">
<circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" />
<circle class="spinner" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50">
<style>
.spinner2 {
transform-origin: 25px 25px;
-webkit-transform-origin: 25px 25px;
animation: loading-spin2 .8s infinite linear;
-webkit-animation: loading-spin2 .8s infinite linear
}
#-webkit-keyframes loading-spin2 {
100% { opacity:0; }
}
#keyframes loading-spin2 {
100% { opacity:0; }
}
</style>
<defs>
<clipPath id="a">
<path d="M0 0h25v25H0z" />
</clipPath>
</defs>
<g fill="none">
<circle cx="25" cy="25" r="23" stroke="#000" stroke-opacity=".5" />
<circle class="spinner2" cx="25" cy="25" r="23" clip-path="url(#a)" stroke="#191919" stroke-width="3" />
</g>
</svg>

Just had the same issue myself. After digging around I found out that CSS transforms in SVG's are not supported by Edge at the moment. It's really annoying but your only option is to use Javascript to animate an SVG on Edge.
You can follow the status of the feature on the Microsoft Edge site.
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/

Resources