How do I animate my name in SVG? - html

I want to write my name out in cursive SVG
So far I've gotten it partially working. But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it. Also, is there a way to change the font family?
Fiddle
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>practice</title>
<script type="text/javascript" src="script.js">
</script>
<link href="test.scss" rel="stylesheet" />
<link href="svg.css" rel="stylesheet" />
</head>
<body>
<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
<text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text>
</svg>
</body>
</html>
CSS
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear alternate infinite;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}


But i want it to go from being blank to writing out my name. So far it
just rewrites overtop of it.
Change fill="#000000 to fill="none".
Also, is there a way to change the font family?
Change the font-family attribute.
<text class="path" xml:space="preserve" text-anchor="middle"
font-family="Arial" font-size="65" id="svg_1" y="330" x="528"
stroke-width="2" stroke="#000000" fill="none">joshua</text>

Related

How can I make the SVG animation seamless and smooth?

I have animated the SVG, to give a handwriting effect, I want to make the animation more seamless, as the letter "W" appears in the animation, it makes the other part of the letter appear as well, and I can't decrease the stroke-width as the rest of the part of the letter will not appear completely, please guide me along on what can be done.
As I cant upload the code here its SVG and exceeding more than 35,000 characters, so please do check the CodePen.
HTML Code
<defs>
<clipPath id="clip-path" transform="translate(0 0)">
<path id="w" d="M47.205,44.721c-.1.062-.191.119-.262.169a1.172,1.172,0,0,0-.192.17,1.237,1.237,0,0,0-.155.208,1.71,1.71,0,0,0-.13.285L42.677,55.6q-.354-.956-.708-1.9-.307-.8-.655-1.694t-.623-1.6L38.8,55.6Q37.7,52.9,36.825,50.73q-.37-.925-.739-1.818c-.247-.6-.467-1.134-.662-1.618s-.357-.883-.485-1.2-.2-.508-.223-.57a1.835,1.835,0,0,0-.293-.47,1.326,1.326,0,0,0-.539-.332H36.7a.519.519,0,0,0-.355.4.832.832,0,0,0,.093.539l2.836,7.18,1.077-3.3q-.215-.57-.493-1.247t-.532-1.279c-.17-.4-.313-.747-.432-1.04s-.187-.464-.208-.516a1.529,1.529,0,0,0-.223-.409,1.143,1.143,0,0,0-.532-.332h2.711a.5.5,0,0,0-.315.4,1.016,1.016,0,0,0,.07.539l.817,2.033.8-2.2a.886.886,0,0,0,.068-.479q-.039-.2-.347-.293h1.633a2.841,2.841,0,0,0-.254.17,1.007,1.007,0,0,0-.169.161,1.148,1.148,0,0,0-.124.185,2.582,2.582,0,0,0-.116.254l-1.155,3.034,1.556,4.313L45.652,45.6a1.01,1.01,0,0,0,.062-.533.513.513,0,0,0-.355-.346h1.849Z" style="fill: none" />
</clipPath>
</defs>
<g id="w-grp">
<g style="clip-path: url(#clip-path)">
<polyline class="logo-path m-1" id="w-path" points="35.084 43.989 39.663 55.599 38.796 55.599 38.609 55.136 42.916 43.989 38.968 43.989 43.484 55.599 42.677 55.597 42.474 55.101 46.67 43.989" style="fill: none;stroke: #191717;stroke-miterlimit: 10;stroke-width: 3px" />
</g>
</g>
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?
Linked Question 2: To Control SVG CSS Based Animation Using Jquery?
Linked Question 3: To Control The Speed Of Multiple SVG Elements Using Jquery?

This is how I would do it:
I'm using a polyline element that I am clipping with a V like path. In order to make the W I'm using the clipped polyline twice. I am animating the stroke-dashoffset of the use elements, the second element with a 1s delay
svg{width:300px;border:solid}
use{
stroke-dasharray: 255;
stroke-dashoffset: 255;
animation: dash 1s linear forwards;
}
use:nth-of-type(2){
animation-delay:1s
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="30 80 250 150">
<defs>
<clipPath id="clip">
<path id="V" xmlns="http://www.w3.org/2000/svg" d="M52,90L103,210 110,210 160,90 152,90 110,190 66,90 52,90" stroke="black" fill="none" />
</clipPath>
<polyline id="poly" points="58,85 107,203 156,85" stroke="red" fill="none" stroke-width="19" clip-path="url(#clip)" />
</defs>
<use xlink:href="#poly" x="0" />
<use xlink:href="#poly" x="50" />
</svg>

Mouseover on SVG to change color [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 3 years ago.
I added a SVG into my HTML. What I want to do is, when the mouse is hovering the SVG, change it to a yellowish color with transition of 1s.
The CSS in the HTML is:
.svg {
width: 17px;
height: 99px;
}
The content in HTML:
<body>
<img src="raptor.svg" class="svg" />
</body>
The raptor.svg content is as follow:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
Alternatively, I tried to use CSS to change the color during mouse over:
.svg:hover {
color: #E2C650;
}
It's not working as well, as color CSS property cannot change the SVG fill color.
What did I miss? Do I have to use inline SVG instead?

Rather using svg in img tag you can use place svg in DOM. This should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
width: 17px;
height: 99px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<style>
#content path {
fill: #F00;
transition: 1s;
}
#content:hover path {
fill: #E2C650;
}
</style>
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>
</body>
</html>

I can see this working quite happily if you hover over any part of the SVG path.
If you want to also cause the transition when hovering over any part of the SVG itself, and not just the path then add the following CSS:
svg:hover #content path {
fill: #E2C650;
}
Here's a working snippet:
svg {
width: 17px;
height: 99px;
}
svg:hover #content path {
fill: #E2C650;
}
#content path {
fill: #F00;
transition: 1s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 17.17 99.37">
<g id="Layer_2" data-name="Layer 2">
<g id="content">
<path class="characters" d="M.34,99.37V92.43a8,8,0,0,1,1.41-4.88A4.9,4.9,0,0,1,6,85.64a5.31,5.31,0,0,1,2.56.59,5,5,0,0,1,1.81,1.64l6.5-3.64v5.12L11.64,92V95h5.19v4.41Zm3.47-6.79V95H8.17V92.53a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,90.2a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,92.58Z" />
<path class="characters" d="M.34,73.15,16.64,67l.44,4.34-3.49,1.19v5.7l3.25,1.14v4.39L.34,77.56Zm5.29,2.28L10.11,77V73.78Z" />
<path class="characters" d="M16.83,60.39v4.41H.34V57.87A8.55,8.55,0,0,1,1,54.44,5.55,5.55,0,0,1,3,52a5.69,5.69,0,0,1,3.26-.91,5.18,5.18,0,0,1,3.19,1,5.78,5.78,0,0,1,1.93,2.56A9.28,9.28,0,0,1,12,58.06v2.33ZM3.81,58v2.38H8.56V58a2.27,2.27,0,0,0-.65-1.67,2.21,2.21,0,0,0-1.63-.65,2.51,2.51,0,0,0-1.79.64A2.27,2.27,0,0,0,3.81,58Z" />
<path class="characters" d="M3.81,35.82v5.26h13V45.5h-13v4.85H.34V36.23Z" />
<path class="characters" d="M0,26.34a8.92,8.92,0,0,1,1.12-4.55,7.58,7.58,0,0,1,3.06-3,9.06,9.06,0,0,1,4.32-1A9.24,9.24,0,0,1,13,18.88a7.74,7.74,0,0,1,3.08,3,8.82,8.82,0,0,1,1.1,4.44A8.75,8.75,0,0,1,16,30.84a7.74,7.74,0,0,1-3.07,3,9,9,0,0,1-4.32,1,9.1,9.1,0,0,1-4.48-1.09,7.82,7.82,0,0,1-3.08-3A8.72,8.72,0,0,1,0,26.34Zm8.63,4a5.52,5.52,0,0,0,3.49-1.06,3.47,3.47,0,0,0,1.36-2.9,3.67,3.67,0,0,0-1.3-2.9,5.47,5.47,0,0,0-3.7-1.13A5.35,5.35,0,0,0,5,23.42a3.7,3.7,0,0,0-.73,4.9,4.34,4.34,0,0,0,1.75,1.46A5.86,5.86,0,0,0,8.63,30.32Z" />
<path class="characters" d="M.34,15.13V8.2A8,8,0,0,1,1.75,3.32,4.9,4.9,0,0,1,6,1.41,5.31,5.31,0,0,1,8.53,2a5,5,0,0,1,1.81,1.64L16.83,0V5.12L11.64,7.79v2.93h5.19v4.41ZM3.81,8.34v2.38H8.17V8.29a2.34,2.34,0,0,0-.62-1.67A2.09,2.09,0,0,0,6,6a2,2,0,0,0-1.61.62A2.57,2.57,0,0,0,3.81,8.34Z" />
</g>
</g>
</svg>

Rotating SVG with CSS from bottom of group

I am trying create some kind of gauge animation. I added two simple gauges inside a rectangel . When I try to rotate a needle it doesn't rotate around its bottom part. Instead it rotates around another point even though I state to rotate around bottom center. What should I do to rotate the needle from bottom? Thanks.
EDIT:
Here is the animation I am trying to achieve
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
#Gaugaetip2 {
animation: dance 2s infinite alternate;
}
#keyframes dance {
100% {
transform-origin: bottom center;
transform: rotate(-25deg);
}
}
</style>
</head>
<body>
<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>test</title>
<defs>
<path d="M17.6298701,13.9630295 L17.6298701,4.43831169 L15.6298701,4.43831169 L15.6298701,13.9630295 C14.6733943,14.3565661 14,15.2976952 14,16.3961039 C14,17.8485411 15.177433,19.025974 16.6298701,19.025974 C18.0823073,19.025974 19.2597403,17.8485411 19.2597403,16.3961039 C19.2597403,15.2976952 18.5863459,14.3565661 17.6298701,13.9630295 L17.6298701,13.9630295 Z" id="path-1"></path>
<path d="M18.91403,13.9099151 L18.91403,4.38519729 L16.91403,4.38519729 L16.91403,13.9099151 C15.9575542,14.3034517 15.2841598,15.2445808 15.2841598,16.3429895 C15.2841598,17.7954267 16.4615928,18.9728596 17.91403,18.9728596 C19.3664671,18.9728596 20.5439001,17.7954267 20.5439001,16.3429895 C20.5439001,15.2445808 19.8705058,14.3034517 18.91403,13.9099151 L18.91403,13.9099151 Z" id="path-3"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="test" transform="translate(-30.000000, -30.000000)">
<g transform="translate(30.000000, 30.000000)">
<rect id="background" fill="#4BBCE9" x="0" y="0" width="135" height="135" rx="8"></rect>
<g id="Gauge" transform="translate(5.136364, 8.642857)">
<g id="Group-3" transform="translate(0.149351, 0.383117)">
<ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="16.6298701" cy="16.3961039" rx="15.7792208" ry="15.7792208"></ellipse>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Gaugaetip2" fill="#D8D8D8" xlink:href="#path-1"></use>
</g>
</g>
<g id="Gauge-Copy-3" transform="translate(95.551948, 9.642857)">
<ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="15.7792208" cy="15.7792208" rx="15.7792208" ry="15.7792208"></ellipse>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Gaugetip" fill="#D8D8D8" transform="translate(17.914030, 11.679028) rotate(25.000000) translate(-17.914030, -11.679028) " xlink:href="#path-3"></use>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>

Try adding the transform-origin to the element itself. As this is a fixed property that does not change over time, it shouldn't be part of the keyframes.
#Gaugaetip2 {
animation: dance 2s infinite alternate;
transform-origin: center 84%;
transform-box: fill-box;
}
#keyframes dance {
100% {
transform: rotate(-25deg);
}
}
I also adjusted the origin position a little to stay centered on the round part.
Result: https://jsfiddle.net/dowm6eff/

Color SVG from external CSS

I have a simple SVG made in Illustrator, and each part of it I'd like to have a different color. The SVG currently looks like this.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Ellipse_2_xA0_Image_1_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
xml:space="preserve">
<circle cx="500" cy="500" r="13"/>
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="500" cy="500" r="20"/>
<circle cx="911" cy="500.5" r="7"/>
<circle cx="91" cy="500.5" r="7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="218.2" y1="501.5" x2="501" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="501.5" x2="499" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="499.5" x2="499" y2="782.3"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="501" y1="782.3" x2="218.2" y2="499.5"/>
</svg>
The class currently sits in a style sheet requested before the SVG. I've tried adding classes to the SVG, line, and circle tags to try and change the colors with either fill or stroke and it remains black. I've tried removing the stroke parameter as well (even though others said to keep it), yet it'll just remove it completely than allowing the CSS to take over. What am I doing wrong?
CSS:
.svgColor {
stroke: #a90000;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="/css/loading.css" rel="stylesheet"/>
</head>
<body>
<img src="/svg/loadingSymbol.svg" alt="Loading Symbol">
</body>

If you are using an external css file you have to link it from your csv. Your svg is not inlined in the html, so the html css is not appliet to it.
Before the svg tag: <?xml-stylesheet type="text/css" href="/css/loading.css" ?>
shoud work. If it doesn't try to insert the svg with <object>.

Since the strokes are defined directly on the elements, you'll need to use !important in your css to override them.
.svgColor {
stroke: #a90000 !important;
}

Css hover sometimes doesn't work on svg paths

I got a svg with paths, and i have css hover on them, but hover sometimes work, sometimes not.
What can be the problem?
<div id="map_wrapper">
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<path id="svg_3" d="m200,114l-114,95l26,97l99,20c0,0 19,-67 19,-68c0,-1 -1,-5 4,-8c5,-3 39,-10 40,-10c1,0 13,-2 14,-9c1,-7 -4,-36 -8,-40c-4,-4 -23,-15 -27,-17c-4,-2 -24,-16 -24,-23c0,-7 -1,-15 -1,-21c0,-6 -6,-19 -7,-19c-1,0 -21,3 -21,3z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
<path id="svg_4" d="m244,101c0,0 14,55 16,56c2,1 22,11 24,13c2,2 23,17 24,18c1,1 1,28 -1,31c-2,3 -3,25 -9,30c-6,5 -32,14 -35,14c-3,0 -8,5 -10,8c-2,3 -10,37 -10,37c0,0 7,10 16,15c9,5 53,12 59,12c6,0 30,0 40,-8c10,-8 34,-7 35,-31c1,-24 1,-48 1,-65c0,-17 -13,-61 -15,-66c-2,-5 -21,-21 -21,-23c0,-2 34,-20 44,-15c10,5 29,24 33,28c4,4 10,20 16,5c6,-15 28,-31 -1,-46c-29,-15 -25,-24 -55,-25c-30,-1 -42,-5 -53,-5c-11,0 -46,-2 -52,1c-6,3 -46,16 -46,16z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
<path id="svg_5" d="m428,180c0,0 -3,52 -4,53c-1,1 -2,27 -2,31c0,4 -8,29 -11,34c-3,5 -15,36 -21,38c-6,2 -77,18 -81,18c-4,0 -68,0 -68,7c0,7 -1,18 8,23c9,5 23,9 45,14c22,5 97,12 111,6c14,-6 44,-20 55,-30c11,-10 28,-28 37,-42c9,-14 14,-15 23,-40c9,-25 16,-109 12,-114c-4,-5 -32,-12 -45,-9c-13,3 -59,11 -59,11z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>
</div>
and css
path{
fill:none;
stroke:black;
}
path:hover{
fill:red;
stroke:blue;
}
Here is the fiddle, just hover them quickly.
http://jsfiddle.net/gWXbn/

There's no fill so the interior does not catch mouse events by default and therefore hover doesn't react to that. Changing pointer-events to all will fix it in this case:
path{
fill:none;
stroke:black;
pointer-events:all;
}

The following fixed my problem with svg and jQuery hover and alike.
svg, svg * {
pointer-events: none;
}

This always works for me when using object tag
object {
pointer-events: none;
}