Svg animation with d: path - css
I am trying to animate my svg with path property by following this codepen, but my animation path is not smooth and going with some weird steps. Is there something wrong with path values or what am I doing wrong here ?
.p-4 path {
d: path("");
fill: #ff9fba;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
d: path("");
}
25% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572a3.033,3.033,0,0,1,1.216,4.057,2.967,2.967,0,0,1-3.985,1.266c-.29-.15-.788-.47-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
50% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.13.02,2.61,1.726c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
75% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291a3,3,0,0,1,2.635,3.325,3,3,0,0,1-3.325,2.635c-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
100% {
d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291,3.293.381,11.241-.41,13.927-15.954a3,3,0,0,1,3.467-2.445A3,3,0,0,1-289,971.059c-3.658,21.167-16.638,21.342-20.529,20.892-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="89.095" height="67.442" viewBox="0 0 89.095 67.442" class="usp_overlap_photo p-4">
<path id="home-usp4-p4" transform="translate(378.051 -967.547)"/>
</svg>
Would it be ok if the shape was turned into a path with a stroke instead of an outline of the shape with a fill?
Here I refactured the shape and animate the stroke-dasharray instead of the d attribute.
.p-4 path {
fill: none;
stroke: #ff9fba;
stroke-width: 5px;
stroke-linecap:round;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
stroke-dasharray: 0 100;
}
25% {
stroke-dasharray: 25 100;
}
50% {
stroke-dasharray: 50 100;
}
75% {
stroke-dasharray: 75 100;
}
100% {
stroke-dasharray: 100 100;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
<path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>
Well, then we don't need all the keys in the keyframe:
.p-4 path {
fill: none;
stroke: #ff9fba;
stroke-width: 5px;
stroke-linecap:round;
animation-name: dash;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes dash {
0% {
stroke-dasharray: 0 100;
}
100% {
stroke-dasharray: 100 100;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
<path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>
Related
Saving the result of animation
I wrote something like this:
<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
<defs><style>
.cls-21{
fill:white;
cursor: pointer; }
.svg-cab:hover .cls-21{
stroke-dasharray: 1000;stroke-miterlimit:10;stroke-width:20px;
stroke-dashoffset: 1000;
animation: dash 1s linear;
stroke: white;
}
#keyframes dash {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}
</style></defs><path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg></a>
It s an animation when I hover on the svg the stroke looms over it
and I need to when animation has been ended the stroke was saved till mouseover
Does anyone have any idea?
You can rely on forwards and animation-play-state to simulate this. The trick is to move all the style that you need to keep inside an animation and forwards will do the job of saving them
.cls-21 {
fill: red;
cursor: pointer;
animation:
dash 1s linear paused forwards,
stroke 1s linear paused forwards;
}
.svg-cab:hover .cls-21 {
stroke-dasharray: 1000;
stroke-miterlimit: 10;
animation-play-state: running;
}
#keyframes dash {
from {
stroke-dashoffset: 999;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes stroke {
1%,100% {
stroke: white;
stroke-width: 20px;
}
}
<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
<path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg>
CSS for my SVG (Having trouble with Transform Origin)
So I have two classes(firstCircle & spin) on the First circle on the left and I'm trying to get it to rotate in place.(removed them from css so you can see the circle) I'm getting confused on transform-origin: What is wrong with my code.It's rotating way out of place instead of spinning. I added a width and height and tried transform-origin and it just makes it disappear.
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 1120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
transform-origin: center center;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
.container { padding:auto;
width: auto;
height: auto;
text-align:center; }
.line1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.13s;
}
.line2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.5s;
}
.line3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3s;
}
.line4 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.4s;
}
.line5 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.9s;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.insidefirstCircle {
stroke-dasharray: 1000;
stroke-dashoffset: 100;
animation: insideCircle 10s linear forwards;
animation-delay: 1.2s;
}
#keyframes insideCircle {
from {
stroke-dashoffset: 1000;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.secondCircle {
animation: secondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes secondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.insidesecondCircle {
animation: insidesecondCircle 2s linear forwards;
animation-delay: 2.2s;
}
#keyframes insidesecondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<svg>
<path class="firstCircle spin"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
id="path7158"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<path class="insidefirstCircle"
transform="matrix(-0.22033261,-0.9754248,-0.97735568,0.21160309,0,0)"
d="m -102.55362,-32.142649 a 7.185163,7.442451 0 0 1 5.829705,7.489633 7.185163,7.442451 0 0 1 -6.173275,7.188196 7.185163,7.442451 0 0 1 -7.86062,-5.124812"
id="path7160"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35700712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<ellipse class="secondCircle"
ry="5.8064542"
rx="5.806459"
transform="rotate(-9.0228844)"
cy="102.10918"
cx="31.181959"
id="path7162"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.38561434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle class="insidesecondCircle"
r="2.081239"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.138;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7192"
cx="46.80978"
cy="95.955421" />
<circle class="line1"
r="8.1839027"
cy="124.84148"
cx="88.252518"
id="path7166"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.63219434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:3.454;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7168"
cx="88.252518"
cy="124.84148"
r="4.5812778" />
<circle
r="6.7396846"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.52063066;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7174"
cx="128.74611"
cy="90.168755" />
<path
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="path7186"
d="m -180.38976,-169.87182 a 20.505369,19.487934 0 0 1 27.64196,8.28339 20.505369,19.487934 0 0 1 -8.68637,26.27924 20.505369,19.487934 0 0 1 -27.66048,-8.22736 20.505369,19.487934 0 0 1 8.62739,-26.29677"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" />
<ellipse
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="ellipse7190"
cx="152.20651"
cy="155.0309"
transform="matrix(0.98886074,-0.14884364,0.16522023,0.9862567,0,0)"
rx="5.5144606"
ry="5.2409396" />
<circle
cy="90.168755"
cx="128.74611"
id="circle7196"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.13800001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
r="2.081239" />
<path class="line1"
id="path875"
d="m 19.085467,74.174836 c 22.366283,17.178223 22.335724,17.75844 22.335724,17.75844"
style="fill:none;stroke:#4fae7d;stroke-width:0.28233331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line2"
style="fill:none;stroke:#4fae7d;stroke-width:0.36648375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 51.183439,99.59881 c 29.032633,22.29825 28.992966,23.0514 28.992966,23.0514"
id="path885" />
<path class="line3"
id="path879"
d="M 95.534634,121.46865 C 123.9702,95.423153 123.73736,94.872744 123.73736,94.872744"
style="fill:none;stroke:#4fae7d;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line4"
id="path881"
d="m 134.621,93.468564 c 37.14699,33.672096 37.14699,33.672096 37.14699,33.672096"
style="fill:none;stroke:#4fae7d;stroke-width:0.26971px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line5"
id="path883"
d="m 181.40295,129.52127 c 31.40453,-10.83262 31.9066,-11.93052 31.9066,-11.93052"
style="fill:none;stroke:#4fae7d;stroke-width:0.37912115px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>
</div>
</body>
</html>
Firstly, most of the CSS properties you have in your .spin and firstCircle definitions are invalid. position, top, 'left, and margin are all HTML-only properties. And width and height are not valid for <path> elements.
It is important to remember that SVG is a totally different standard from HTML and works differently.
Secondly, your path already has a transform. CSS transforms don't add, so any transform in your animation, will overwrite the one on your <path>.
The simplest way to resolve that problem is to either (a) get your SVG editor to multiply through the transform to the path coordinates; or (b) work around it by using a nested group <g> element around the path. One of the transforms is applied to that, and the other is applied to the path.
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="..." />
</g>
transform-origin
Now that those issues are resolved, we can deal with the matter of the centre-of-rotation.
There are issues with browser compatibility with transform-origin. Chrome has an implementation that is out-of-date with respect to the specification. That is in the process of getting fixed, but for now, the workaround is to always use absolute coordinates instead of percentage values.
The centre of your circle is at (-19.5, -91.7), so the correct transform-origin to use is:
transform-origin: -19.5px -91.7px;
So if we plug this into a working example:
.spin {
transform-origin: -19.5px -91.7px;
animation:spin 4s linear infinite;
}
#keyframes spin {
100% { transform:rotate(360deg); }
}
<svg>
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</g>
</svg>
stroke-dashoffset not working with SVG
i am new to SVG and animation.
just created a path and wanted to draw it with animation, i am using "stroke-dashoffset" but its not working.
Here is my HTML :
<div class="Q">
<svg height="100%" width="100%" viewBox="200 0 400 400">
<path id="latter_q" d="M1003.3425022861358,2828.211816939241a655.718421,655.718421,0,1,1,-397.5557043956452,543.2070169791295" style="fill: none; stroke-width: 300px; stroke-linecap: round;" transform="matrix(-0.220662 -0.00474159 0.00474159 -0.220662 452.115 953.136)" stroke="purple"/>
<circle id="e4_circle" cx="322" cy="293" stroke="purple" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="38.1936" fill="purple" />
<polygon stroke="purple" id="e5_polygon" style="stroke-width: 1px;" points="625.5 543.206 885.5 7.20558 1149.5 535.206 1021.5 481.206 889.5 225.206 767.5 481.206" fill="purple" transform="matrix(0.618136 0 0 0.618136 -4.20822 17.3249)"/>
</svg>
</div>
and CSS
#latter_q{
animation: DrwaQ 2s linear alternate infinite;
animation-delay: 1s;
/*stroke-dashArray: 1100;*/
stroke-dashoffset: 1100;
}
.Q{
width: 100%;
height: 100%;
position: absolute;
/*opacity: 0;*/
}
#keyframes DrawQ {
to { stroke-dashOffset: 0; }
}
finally got it worked.
CSS :
#latter_q{
animation: DrwaQ 2s ease-in ;
animation-delay: 0s;
stroke-dasharray: 3435;
}
#keyframes DrwaQ {
to {
stroke-dashoffset: 6904;
}
from {
stroke-dashoffset: 3447;
}
}
stroke-dashoffset is not a CSS property (yet) - you have to do this with JavaScript https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Reducing size of SVG tick
I have created an SVG animation tick here: https://plnkr.co/edit/5FlA5j8iXO4EPCzxAugs?p=preview
How can i reduce the size of the tick? For example, to half of the size shown?
#check {
fill: none;
stroke: green;
stroke-width: 20;
stroke-dasharray: 180;
stroke-dashoffset: 180;
-webkit-animation: draw 1.2s infinite ease;
animation: draw 1.2s infinite ease;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
-webkit-#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>
You can use css transform: scale(0.5); to #check like this:
The CSS transform property lets you modify the coordinate space of the
CSS visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed. - by Mozilla MDN
#check {
transform: scale(0.5);
fill: none;
stroke: green;
stroke-width: 20;
stroke-dasharray: 180;
stroke-dashoffset: 180;
-webkit-animation: draw 1.2s infinite ease;
animation: draw 1.2s infinite ease;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
<svg width="150" height="150">
<path id="check" d="M10,30 l30,50 l95,-70" />
</svg>
I'd suggest to add the viewbox attribute to your svg element so you could properly control the size of your element by simply changing the width and/or the height while keeping its aspect and its internal coordinate system. Your element has approx.ly a 140 x 95 viewbox so you could write <svg width="50" viewbox="0 0 140 95"> <path id="check" d="M10,30 l30,50 l95,-70" /> </svg> Example: https://plnkr.co/edit/ERuQr4NsKfYHT7kebjkR?p=preview
CSS how to revert SVG animation on mouseout from current frame
I'm doing some button animation with SVG and can't make it to work exactly I want. I tried find same case but no luck. So I end up here, because I spend too much time on this already. Any help would be much appreciated.
Here is the code: http://jsfiddle.net/wq4djg9z/2/
It works fine, but with one flaw. It's always starts animation from fixed value.
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
}
#button-border:hover {
-webkit-animation: dash 1.0s linear forwards;
pointer-events: all;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
Is there a way to start animation from current animation frame when mouse out the button to smooth animation?
What about using transitions instead of animations to do the reverse part ?
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
transition: stroke-dashoffset 1s linear;
-webkit-transition: stroke-dashoffset 1s linear;
}
#button-border:hover {
stroke-dashoffset: 0;
pointer-events: all;
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
#keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.00000" height="50.00000" id="svg1" version="1.1" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<style type="text/css">
<![CDATA[]]>
</style>
<g id="button-border">
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 100,50.0 0,-50.00000 -100,00.00000" id="path2983" />
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 0,0 0,50 100,0" id="path2984" />
<text x="30" y="30" font-family="Verdana" font-size="15" fill="blue">Hello</text>
</g>
</svg>